在Vue中，从孩子>父母>上级父母传递数据的最佳方式是什么？

Question

在Vue中，从子代>父代>上级父代传递数据的最佳方式是什么？

好像用的是emit，但是emit是否应该用来将数据从子代传到父代传到上级父代？如果不是，最好的方法是什么？

如果是的话，会不会用同样的emit监听器，比如。@dataHandler="data", 是否可以在每个父级到上级的父级中使用, 是否数据必须明确地存储在每个父级到上级的父级中?

任何帮助都将是非常感激的。

Answer 1

我建议创建一个事件总线。

这可以按以下方式进行。

在main.js中添加

Vue.prototype.$bus = new Vue

在您的组件中

this.$bus.$emit('theEventName', data)

真实世界模板

<button @click="$bus.$emit('theEventName', data)">Add</button>

方法中的实际例子

methods: {
  addItem (data) {
    this.$bus.$emit('theEventName', data);
  }
}

在父应用程序中（或应用程序中的任何地方）添加一个监听器。

beforeCreate () {
  this.$bus.$on('theEventName', this.yourMethod);
}

methods: {
  yourMethod (data) {
    // do your thing
  }
}

不要忘记删除监听者

beforeDestroy(){
  this.$bus.$off('theEventName', this.yourMethod);
}