directive vue抛出事件

在Vue中，通过directive指令可以用来扩展HTML元素的特殊行为。当需要在directive中抛出一个自定义的事件时，可以通过使用Vue的自定义事件系统来实现。

首先，在directive的定义中，需要使用Vue.directive()方法来注册自定义的directive，并在该directive的定义对象中的bind钩子函数中，绑定一个事件处理函数，用于处理事件的抛出。在这个事件处理函数中，通过Vue实例的$emit()方法去触发自定义事件，传递需要的数据。

下面是一个具体的例子：假设我们需要一个自定义的directive，用于在点击元素时抛出一个事件，并传递点击的坐标信息。

// 注册自定义directive
Vue.directive('click-event', {
  bind: function(el, binding, vnode) {
    function handleClick(e) {
      // 获取鼠标点击的坐标
      var coords = {
        x: e.clientX,
        y: e.clientY
      };
      
      // 触发自定义事件，并传递坐标信息
      vnode.context.$emit('custom-click', coords);
    }
    
    // 绑定事件处理函数到元素上
    el.addEventListener('click', handleClick);
  }
});

在上述的代码中，我们定义了一个名为click-event的directive，并在bind钩子中绑定了一个handleClick()事件处理函数。在该事件处理函数中，通过vnode来获取当前directive所在的组件实例，并使用$emit()方法触发一个名为custom-click的自定义事件，并传递鼠标点击的坐标信息。

在使用这个directive的组件模板中，就可以监听custom-click事件，并处理传递过来的坐标信息。例如：

<template>
  <div v-click-event @custom-click="handleCustomClick"></div>
</template>

<script>
export default {
  methods: {
    handleCustomClick(coords) {
      console.log("点击坐标：", coords);
    }
  }
}
</script>

在上述的代码中，我们在组件模板中使用v-click-event指令绑定到一个div元素上，并使用@custom-click指令监听custom-click事件，并将该事件的处理函数绑定到handleCustomClick()方法上。当点击该div元素时，custom-click事件将被触发，handleCustomClick()方法将被调用，并且传递鼠标点击的坐标信息。在这个例子中，我们只是简单地将坐标信息输出到控制台，你可以根据实际需求对坐标信息进行处理。