0

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

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

我找到了两个解决方案：

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

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

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

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

4

1 回答 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

于 2016-07-04T09:40:06.267 回答