我有一个请求,当与不同的父组件通信时,vue.js的常用组件的最佳实践如何 .
例如,在我的场景中,一个基本的模态组件,触发一个'close'方法,但它有两个不同的父组件
我找到两个解决方案:
-
parent需要传递一个额外的prop,然后baisc组件只触发事件的名称是prop值的事件,因此可以调用附加的侦听器父组件
-
在基本模态中只使用这个 . $ parent访问父组件方法,或者这个 . $ parent.trigger('xxx'),然后父知道该怎么做
但是,上面我认为不是很好,第一个可能需要传递一个额外的道具,这让其他人写第三个,第四个父组件使用基本组件不是很方便 . 第二个可能感觉更难编码 .
那么,在这种情况下是否有更好的解决方案?
1 回答
使用
this.$dispatch('eventName', data)
(对于Vue 2.x,使用this.$emit('eventName', data)
),将事件触发到任何父级,祖父级和进一步向上链(您可以使用this.$broadcast('eventName', data)
在Vue <2.x中触发链中的事件) .如果父级有一个名为'eventName'的事件,那么它将触发此事件 .
如果你有多个父母,你可以给他们每个人一个不同的事件,并从孩子通过派遣解雇这个特定的事件 . 您还可以为每个父级提供相同的事件,并传递指定父级应该执行的操作的数据支柱 . 第三种选择是指具体的父母:
每个选项都有利弊 . 最佳解决方案取决于上下文 . 但我认为最好的解决方案通常是选项1.然后您不需要额外的数据参数 . 选项3没有松散耦合 .
欲了解更多信息:https://vuejs.org/guide/components.html