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