Vuejs2 Vuejs从孙辈发射到基本父辈

如果我有嵌套组件3-4层中的组件，并且：

我希望将数据从基本的父组件发送到最终的子组件，我必须从每个父组件发送到每个子组件-这很好，但是

2如果我想从最后一个子元素接收基本父元素中的数据，我必须向每个子元素发送数据，并获得int的父元素中的数据，直到它到达基本元素-这不是很酷

这就是它的工作原理

<component1 @change="change">
    <component2 :data="data" @change="change">
        <component3 :data="data" @change="change">
            <component4 :data="data">
            </compoent4>
        </compoent3>
    </compoent2>
</compoent1>

在基本父组件中，我将具有：

props: {data: {type: String}},
methods: {
    change: function () {
        this.$emit('change', this.data)
    }
}

data() {
    data: 1
    }
},
methods: {
    change: function () {
        this.$emit('change', this.data)
    }
}

---

或者最好使用vuex？

在Vue中解决此问题的正确方法是使用EventBus

创建一个新文件，将其命名为eventBus.js，并将以下内容放入其中

import Vue from 'vue'
export default new Vue()

然后，在要从中进行通信的文件上，导入该文件并按如下方式使用

发送事件：

import EventBus from '../eventBus' 
EventBus.$emit('MESSAGE_NAME', payload)

接收事件：

  import EventBus from '../eventBus' 
  EventBus.$on('DATA_PUBLISHED', (payload) => {
      this.updateData(payload)
   })

---

Vuex或事件总线可能过于致命，它会破坏自上而下的组件体系结构

如果您确实需要具有触发器和向下传递的结果的单向数据流： 您可以使用react样式：将change函数作为一个道具向下传递，它可以通过闭包访问父数据，只需在子数据中调用它即可。您甚至可以使用提供/注入

<component1 :change="change">
    <component2 :data="data" :change="change">
        <component3 :data="data" :change="change">
            <component4 :data="data" :change="change">
            </compoent4>
        </compoent3>
    </compoent2>
</compoent1>

构成部分4

如果您真的只想进行深度双向绑定： 您可以将包含数据的对象向下传递，甚至可以使用提供/注入跳过层，而不是将数据作为字符串道具向下传递。然后，您不需要更改函数，只需直接操作数据即可。一如既往，您可以使用“提供/注入”跳过层

<component1 :data="data">
    <component2 :obj="obj">
        <component3 :obj="obj" >
            <component4 :obj="obj">
            </compoent4>
        </compoent3>
    </compoent2>
</compoent1>

构成部分4

---

我在这里也找到了存储模式示例，谢谢，我看到了一些关于EventBus on stack overflow的信息，但当时不需要它，我不明白我可以在这里使用它是的！使用商店是一个很好的选择。

props: {data: {type: String}, change: Function},
methods: {
    // no methods required! just call: this.change();
}

<component1 :data="data">
    <component2 :obj="obj">
        <component3 :obj="obj" >
            <component4 :obj="obj">
            </compoent4>
        </compoent3>
    </compoent2>
</compoent1>

props: {data: {type: String}},
computed: {
    obj: function () {
        return {data: this.data};
    }
}

props: {obj: {type: Object}},
methods: {
    change: function (newValue) {
        this.obj.data = newValue;
    }
}