Vue.js最佳实践--给大量子孙组件传值(provide/inject)

开发中有个需求，有个Parent组件（例如div）下，输入框，下拉框，radiobutton等可编辑的子孙组件几百个，根据某个值统一控制Parent下面的所有控件的disabled状态

类似于这样，给大量子孙组件传值的场景，一直在思考在Vue.js下面有没有什么最佳实践？

类似于下面这种结构

<App>

<Parent1>

<Child1>

<Child1Child1>

......

<Child1ChildN>

<Child2>

<Child2Child1>

......

<Child2ChildN>

<Child3>

<Child3Child1>

......

<Child3ChildN>

.......

<ChildN>

<ChildNChild1>

......

<ChildNChildN>

尝试1：安装Vue.js官方教程，父子传值使用props

　　缺点：在这种场景下，每层都要传递写起来实在是痛苦不堪   放弃

尝试2：采用Vuex的方案，统一一个状态值来控制所有子组件的状态

缺点：如果有Parent1和Parent2，两个组件下面的子组件状态不一样，即Parent1下面disabled，Parent2下面可用，Vuex的状态必须再追加一个，如果多个Parent，Vuex就不够灵活   放弃

尝试3：provide/inject机制   目前看来比较完美的方案

Parent组件provide一个状态

export default {
  props: {
    disableMode: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return { // provide默认不算响应式的，为了变更可响应，返回一个可响应对象
      componentDisableMode: { disabled: this.disableMode },
    }
  },
  watch: {   // provide默认不算响应式的，为了变更可响应，需要监听props传来的状态
    disableMode(newValue) {
      this.componentDisableMode.disabled = newValue
    },
  },
  provide() { // 提供一个组件禁用状态
    return {
      componentDisableMode: this.controlDisableMode,
    }
  },
}

所有的子组件里面inject这个值，根据这个值来控制禁用状态

inject: {
    componentDisableMode: { default: { disabled: false} },
},

具体使用代码（Child的禁用状态，由Parent1DiableFlag或ParentXDiableFlag来控制，即Child里面可以得到Parent传来的值）

<Parent1 :disable-mode= "Parent1DisableFlag">
    <Child1></Child1>
    <ChildX></ChildX>
</Parent1>
<ParentX :disable-mode= "ParentXDisableFlag">
    <Child1></Child1>
    <ChildX></ChildX>
</ParentX>

 

PS:在vue.js论坛上也发帖咨询过 https://forum.vuejs.org/t/best-way-to-pass-prop-to-chidrens-children/32633

欢迎大神指导有没有其他最佳实践

转载于:https://www.cnblogs.com/Amar/p/9106465.html