如何构建Vue指令监听组件$emit触发的自定义事件？

你的思路方向是对的，但问题出在监听的对象错了——你用vnode.context.$on监听的是父组件实例的事件，而子组件通过$emit触发的事件是在它自己的组件实例上派发的，父组件的上下文自然收不到这些事件。下面是完整的解决方案：

核心问题分析 #

Vue组件的$emit是在自身实例上触发自定义事件的，而vnode.context指向的是指令所在的父组件实例。你之前的代码相当于在父组件上监听事件，但子组件的事件并没有冒泡到父组件（除非你手动通过$root或事件总线传递，但这不是正确做法），所以事件处理函数永远不会被调用。

正确的指令实现 #

我们需要获取子组件的实例，然后在这个实例上监听它$emit的事件。同时要记得在指令解绑时移除监听，避免内存泄漏：

Vue.directive('my-custom-directive-on', {
  bind(el, binding, vnode) {
    // 确保指令绑定在Vue组件上（而非普通DOM元素）
    if (!vnode.componentInstance) {
      console.warn('v-my-custom-directive-on 只能绑定在Vue组件标签上');
      return;
    }

    const childInstance = vnode.componentInstance;
    const eventName = binding.arg; // 获取指令后缀的事件名（比如示例中的"click"）

    // 定义事件处理逻辑，支持两种场景：赋值给data / 执行回调函数
    const handler = (eventData) => {
      if (typeof binding.value === 'function') {
        // 如果传入的是函数，直接执行（绑定父组件上下文）
        binding.value.call(vnode.context, eventData);
      } else {
        // 如果传入的是data属性名，把事件数据赋值给该属性
        vnode.context[binding.value] = eventData;
      }
    };

    // 在子组件实例上监听事件
    childInstance.$on(eventName, handler);
    // 存储handler，方便解绑时移除监听
    vnode._customDirectiveHandler = handler;
  },

  unbind(el, binding, vnode) {
    // 指令解绑时移除事件监听，防止内存泄漏
    if (vnode.componentInstance && vnode._customDirectiveHandler) {
      vnode.componentInstance.$off(binding.arg, vnode._customDirectiveHandler);
    }
  }
});

使用示例 #

场景1：将事件数据赋值给父组件的data #

这对应你给出的示例用法：

<template>
  <some-component v-my-custom-directive-on:click="someData">
    子组件内容
  </some-component>
</template>

<script>
export default {
  data() {
    return {
      someData: null // 子组件$emit('click', xxx)后，这里会被赋值为xxx
    };
  }
};
</script>

场景2：执行回调函数 #

如果需要更复杂的逻辑，可以传入一个函数：

<template>
  <some-component v-my-custom-directive-on:click="handleChildClick">
    子组件内容
  </some-component>
</template>

<script>
export default {
  methods: {
    handleChildClick(eventData) {
      console.log('子组件触发了click事件，数据是：', eventData);
      // 这里可以编写自定义逻辑
    }
  }
};
</script>

关键细节说明 #

1. 获取子组件实例：vnode.componentInstance是指令绑定的组件的实例对象，只有当指令绑定在Vue组件上时才有值，普通DOM元素没有这个属性，所以我们加了判断避免报错。
2. 解绑事件监听：在unbind钩子中调用$off移除监听，防止子组件销毁后仍然保留引用导致内存泄漏。
3. 上下文绑定：当执行传入的函数时，用call(vnode.context, eventData)确保函数内的this指向父组件实例，和Vue原生事件的行为一致。

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