Vue 公共组件与不同父组件通信

Question

我有一个请求，vue.js的公共组件在与不同父组件通信时的最佳实践如何。

比如我的场景，一个基本的模态组件，触发一个'close'方法，但是它有两个不同的父组件

我找到了两个解决方案：

parent需要传一个额外的prop，然后baisc组件就可以了触发事件，事件名称是 prop 值，因此监听器附加的父组件可以称为
在基本模式中只需使用this.$parent 访问父组件方法，或this.$parent.trigger('xxx')，然后parent 知道该做什么

但是，上面两个我觉得都不太好，第一个可能需要额外传一个prop，这让别人写第三个，第四个父组件使用基础组件不太好用。第二个可能感觉更硬编码。

那么，这种情况有没有更好的解决办法呢？

Answer 1

使用this.$dispatch('eventName', data)（对于Vue 2.x，使用this.$emit('eventName', data)），触发一个事件到任何parent，grandparent以及更进一步链（您可以使用 this.$broadcast('eventName', data) 在 Vue < 2.x 中沿链触发事件）。

如果 parent 有一个名为 'eventName' 的事件，那么它将触发该事件。

如果你有多个 parent，你可以给它们每个一个不同的事件，然后从 child 通过调度触发这个特定的事件。您还可以为每个 parent 提供相同的事件并传递指定 parent 应该做什么的数据道具。第三个选项是参考具体的parent：

var parent = new Vue({ el: '#parent' })
// access child component instance
parent.$refs.eventName()

每个选项都有利有弊。最佳解决方案取决于上下文。但我认为总体上最好的解决方案是选项 1。那么您就不需要额外的数据参数。选项 3 不是松耦合的。

更多信息：https://vuejs.org/guide/components.html

Vue 公共组件与不同父组件通信

Vue common component communicate with different parent

vue.js

vue-component