Vue自定义指令中能否触发$emit事件？求实现技巧

当然可以！在Vue自定义指令里通过$emit触发组件的自定义事件完全可行，而且实现起来也不复杂。我会结合directive.js和component.vue这两个文件，给你详细的实现步骤和技巧，分Vue3和Vue2两种场景说明～

核心思路 #

自定义指令的钩子函数中可以获取到使用该指令的组件实例，拿到实例后直接调用$emit方法，就能触发组件上监听的自定义事件了。

具体实现示例 #

1. 自定义指令文件（directive.js） #

Vue3 版本（推荐）

Vue3提供了官方API binding.instance 来获取组件实例，比内部属性更稳定：

// directive.js
export default {
  mounted(el, binding) {
    // 给元素绑定点击事件（也可以是其他事件，比如输入、滚动等）
    const handleClick = () => {
      // 通过binding.instance拿到组件实例，调用$emit触发事件
      binding.instance.$emit('custom-event', '来自指令的参数：点击了按钮');
    };
    el.addEventListener('click', handleClick);

    // 把回调存到元素上，方便卸载时移除监听
    el._handleClick = handleClick;
  },
  unmounted(el) {
    // 组件销毁时移除事件监听，避免内存泄漏
    el.removeEventListener('click', el._handleClick);
  }
};

Vue2 版本

Vue2中可以通过el.__vue__获取组件实例（注意这是内部属性，但一直稳定可用）：

// directive.js（Vue2版本）
export default {
  bind(el) {
    const handleClick = () => {
      // 通过el.__vue__拿到组件实例，触发事件
      el.__vue__.$emit('custom-event', '来自指令的参数：点击了按钮');
    };
    el.addEventListener('click', handleClick);
    el._handleClick = handleClick;
  },
  unbind(el) {
    el.removeEventListener('click', el._handleClick);
  }
};

2. 组件文件（component.vue） #

在组件中注册指令，然后监听自定义事件即可：

Vue3 <script setup> 写法

<template>
  <button v-emit-test>点击我触发指令的emit事件</button>
</template>

<script setup>
import emitTestDirective from './directive.js';

// 注册自定义指令
const vEmitTest = emitTestDirective;

// 监听指令触发的自定义事件
const handleCustomEvent = (msg) => {
  console.log('收到指令传来的消息：', msg);
};
</script>

Vue2 选项式API写法

<template>
  <button v-emit-test>点击我触发指令的emit事件</button>
</template>

<script>
import emitTestDirective from './directive.js';

export default {
  directives: {
    // 注册指令，注意Vue2中指令名会自动转为kebab-case
    EmitTest: emitTestDirective
  },
  methods: {
    handleCustomEvent(msg) {
      console.log('收到指令传来的消息：', msg);
    }
  }
};
</script>

关键技巧与注意事项 #

• 避免内存泄漏：一定要在指令的卸载钩子（Vue3的unmounted、Vue2的unbind）中移除事件监听，不然组件销毁后事件回调还会残留。
• 参数灵活传递：$emit的第二个及以后的参数会全部传递给组件的事件回调，你可以根据需求传递任意类型的数据（比如对象、数组等）。
• Vue3优先用官方API：尽量使用binding.instance而非el.__vue__，前者是Vue3官方提供的稳定API，后者是内部属性，存在未来版本变更的风险。

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