vue多个父组件内使用同一子组件时绑定回调问题

  • Z时代
  • 2024-02-23
  • 分类：IT

vue多个父组件内使用同一子组件时绑定回调问题

我封装了一个下拉选择器，在父组件内給他绑定了自定义事件，但后续组件复用时，在另外的一个父组件中并不需要这个方法，这引起了我的疑惑，不管某父组件需不需要绑定自定义事件，触发其他的父组件回调的emit方法都要写在子组件内，要是有多个父组件都需要绑定自定义事件的话，岂不是要在子组件内写多个emit方法去触发不同的自定义事件，让我很疑惑

A父组件給子组件绑定自定义事件
<v-select
      :options="selectSettings.options"
      :isSelected.sync="selectSettings.value"
      :settings="selectSettings.settings"
      @select="getData"
    >
</v-select>
B父组件不需要自定义事件
<v-select
      :options="selectSettings.options"
      :isSelected.sync="selectSettings.value"
       :settings="selectSettings.settings"
       style="width: 100%"
       >
</v-select>
下拉选择器组件内变化时调用父组件自定义事件    
handeleChange(e) {
      //改变父value
      this.$emit("update:isSelected", e);
      //父数据更新
      this.$emit("select");
    },

就是这种情况，即时B父组件不需要自定义事件，子组件内仍然要有A父组件的emit，
假如还有个C父组件也需要自定义方法，那么在子组件内就还要增加C父组件的emit。
总感觉看着怪怪的，也担心它们间会不会互相影响，请大佬为我讲解一下其中缘由

回答：

这是一种观察者设计模式（发布/订阅模式），建议先去了解相关概念。

子组件就是发布者，它只需要知道有哪些父组件（订阅者）订阅了自己的这个 select 事件，当其触发 emit('select') 时，便会为每一个订阅者发送该事件。

用一些简易代码来举例：

子组件内部有一个数组：

const subscribers = []

父组件 A 绑定事件时：

subscribers.push(ParentComponentA) // [ParentComponentA]

父组件 B 绑定事件时：

subscribers.push(ParentComponentB) // [ParentComponentA, ParentComponentB]

子组件发布 select 事件时：

subscribers.forEach(component => {
  component.dispatch('select')
})

（上面的行为是 vue 帮我们完成的）

以上是 vue多个父组件内使用同一子组件时绑定回调问题 的全部内容， 来源链接： utcz.com/p/937393.html

回到顶部