vue自定义指令 抛出事件

在Vue中，你可以使用自定义指令来抛出事件。下面是一个简单的例子：

首先，在Vue组件中定义一个自定义指令：

 bind: function (el, binding, vnode) {
 // 绑定事件处理逻辑 el.addEventListener('click', function () {
 // 触发自定义事件 vnode.context.$emit('custom-event', binding.value);
 });
 }
});

然后，在模板中使用自定义指令，并监听自定义事件：

 <div v-custom-directive="dataValue"></div>
</template>

<script>
export default {
 data() {
 return {
 dataValue: 'Hello, World!'
 };
 },
 mounted() {
 this.$on('custom-event', this.handleCustomEvent);
 },
 methods: {
 handleCustomEvent(value) {
 console.log('Received custom event:', value);
 // 处理自定义事件逻辑 }
 }
};
</script>

在上述代码中，当 `<div>` 元素被点击时，会触发自定义指令的 `bind` 方法中的事件处理逻辑。然后，通过 `vnode.context.$emit` 方法触发了一个名为 `'custom-event'` 的自定义事件，并传递了 `binding.value`（即 `dataValue`）作为参数。接着，在组件的 `mounted` 钩子函数中，通过 `this.$on` 方法监听了 `'custom-event'`事件，并绑定了处理函数 `handleCustomEvent`。最后，可以在 `handleCustomEvent` 方法中处理自定义事件的逻辑。

这样，当 `<div>` 元素被点击时，就会触发自定义事件，并将传递的参数打印到控制台。你可以根据实际需求修改自定义指令和事件处理逻辑。