Question

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

例如，在我的场景中，一个基本的模态组件，触发一个＆＃39;关闭＆＃39;方法，但它有两个不同的父组件

我找到两个解决方案：

父母需要传递一个额外的道具，然后是baisc组件触发事件哪个事件的名称是prop值，所以是监听器附加的父组件可以称为
只需使用。$ parent访问父组件方法，或者这个。$ parent.trigger（＆＃39; xxx＆＃39;），然后父母知道该怎么做

但是，上面我认为不是很好，第一个可能需要传递一个额外的道具，这让其他人写第三个，第四个父组件使用基本组件不是很方便。而第二个可能会被感觉更难编码。

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

Answer 1

使用this.$dispatch('eventName', data)（对于Vue 2.x，使用this.$emit('eventName', data)），向任何父级，祖父级和更远的链上触发事件（您可以使用this.$broadcast('eventName', data)来触发事件在Vue＆lt; 2.x）链中。

如果父母有一个名为＆＃39; eventName＆＃39;然后它会解雇这个事件。

如果你有多个父母，你可以给他们每个人一个不同的事件，并从孩子通过派遣解雇这个特定的事件。您还可以为每个父级提供相同的事件，并传递指定父级应该执行的操作的数据支柱。第三种选择是指具体的父母：

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

每个选项都有利弊。最佳解决方案取决于上下文。但我认为最佳解决方案通常是选项1.然后您不需要额外的数据参数。选项3没有松散耦合。

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

Vue通用组件与不同的父通信

1 个答案: