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

Question

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

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

我找到了两个解决方案：

1. parent 需要传递一个额外的 prop，然后是 baisc 组件 触发事件，该事件的名称是道具值，所以监听器 可以调用附加的父组件

2. 在basic modal中只要使用this.$parent来访问父组件方法，或者this.$parent.trigger('xxx')，然后parent就知道该怎么做了

但是，上面两个我觉得都不是很好，第一个可能需要额外传递一个prop，这让其他写第三个，第四个父组件的人使用基本组件不是很方便。第二个可能感觉更硬编码。

那么，在这种情况下是否有更好的解决方案？

Answer 1

使用this.$dispatch('eventName', data)（对于Vue 2.x，使用this.$emit('eventName', data)），触发事件到任何父母、祖父母和更上层的事件链（你可以使用this.$broadcast('eventName', data)在Vue中触发事件链下层

如果父级有一个名为“eventName”的事件，那么它将触发该事件。

如果您有多个父母，您可以给他们每个不同的事件，并从孩子通过调度触发这个特定的事件。您还可以为每个父母提供相同的事件并传递一个指定父母应该做什么的数据道具。第三个选项是引用特定的父级：

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

每个选项都有优点和缺点。最佳解决方案取决于上下文。但我认为一般来说最好的解决方案是选项 1。然后你不需要额外的数据参数。选项 3 不是松散耦合的。

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