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

Question

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

似乎使用了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);
}

In Vue what is the best way to pass data from a child > parent > higher parent?