首页 文章

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

提问于
浏览
0

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

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

我找到两个解决方案:

  • parent需要传递一个额外的prop,然后baisc组件只触发事件的名称是prop值的事件,因此可以调用附加的侦听器父组件

  • 在基本模态中只使用这个 . $ parent访问父组件方法,或者这个 . $ parent.trigger('xxx'),然后父知道该怎么做

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

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

1 回答

  • 0

    使用 this.$dispatch('eventName', data) (对于Vue 2.x,使用 this.$emit('eventName', data) ),将事件触发到任何父级,祖父级和进一步向上链(您可以使用 this.$broadcast('eventName', data) 在Vue <2.x中触发链中的事件) .

    如果父级有一个名为'eventName'的事件,那么它将触发此事件 .

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

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

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

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

相关问题