Vue2自定义指令触发事件，父组件通过插槽监听问题

问题根源 #

你用vnode.context.$emit触发事件时，vnode.context指向父组件的全局实例，调用它的$emit会把事件广播给所有监听该事件的回调——不管对应元素属于哪个插槽，自然会导致所有绑定指令的元素都响应。

正确实现步骤 #

1. 移除全局触发代码 #

直接删除这行导致串线的代码：

vnode.context.$emit('vcOnChange', { 'validators': validationResult});

2. 修正事件触发函数 #

原emit函数的监听获取逻辑有漏洞，需要精准定位当前绑定指令的元素/组件的专属事件监听，修改如下：

const emit = (vnode, eventName, data) => {
  // 优先获取当前DOM元素的事件监听
  let handlers = vnode.data?.on;
  // 如果绑定的是组件，获取组件实例的监听集合
  if (!handlers && vnode.componentInstance) {
    handlers = vnode.componentInstance.$listeners;
  }
  
  if (handlers && handlers[eventName]) {
    // Vue的事件处理函数以数组形式存储，需逐个调用
    const eventHandlers = handlers[eventName].fns;
    if (Array.isArray(eventHandlers)) {
      eventHandlers.forEach(fn => fn(data));
    } else {
      eventHandlers(data);
    }
  }
}

3. 父组件插槽内绑定专属监听 #

在父组件中，直接给对应插槽内的元素绑定@vcOnChange事件，每个插槽的元素使用独立的处理函数：

<template>
  <!-- 默认插槽 -->
  <div class="default-slot">
    <input v-input-control @vcOnChange="handleDefaultChange" placeholder="默认插槽输入" />
  </div>

  <!-- 命名插槽 -->
  <div class="named-slot">
    <template #custom>
      <input v-input-control @vcOnChange="handleCustomSlotChange" placeholder="命名插槽输入" />
    </template>
  </div>
</template>

<script>
export default {
  methods: {
    handleDefaultChange(result) {
      console.log('默认插槽输入变化:', result);
    },
    handleCustomSlotChange(result) {
      console.log('命名插槽输入变化:', result);
    }
  }
}
</script>

原理说明 #

修正后的emit函数只会从当前指令绑定的元素/组件的vnode中获取事件监听，触发的是该元素专属的回调，不会波及其他插槽内的元素，从而实现父组件对不同插槽内指令事件的精准监听。

内容的提问来源于stack exchange，提问作者lemek