Vuejs从孙子到基本父母

Question

如果在嵌套组件3-4级别中有组件，并且：

(1)希望将数据从基本父组件发送到我必须从每个家长发送到每个子支持的最后一个子组件--这很好，但是

(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？

Answer 1

在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)
   })

Answer 2

Vuex或事件总线可能会过度使用，它会破坏您自上而下的组件体系结构。

如果您确实需要单向数据流(带有触发器并传递结果)：

您可以使用react：将变更函数向下传递为一个支柱(它可以通过闭包访问父数据)，只需在子函数中调用它。您甚至可以使用“提供/注入”。

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

组件1

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

组件4

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

如果你真的只想要一个深的双向绑定：

您可以通过将包含数据的对象传递到(甚至可以使用提供/注入来跳过层)，而不是将数据作为字符串支柱传递。然后，您不需要一个更改函数，您可以直接操作数据。与往常一样，您可以使用provide/inject跳过层。

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

组件1

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

组件4

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