Question

我需要$emit来自自定义指令的事件。有可能吗？

directive.js：

vnode.context.$emit("myEvent") // nothing append
vnode.child.$emit("myEvent")   // error
vnode.parent.$emit("myEvent")  // error

component.vue：

<div v-directive.modifier="binding" @myEvent="method()"></div>

你知道它是否可能或是否有任何技巧？

由于

Answer 1

<div>不是VueComponent，这意味着它没有$emit方法。

因此，要使您的Vue自定义指令发出事件，您必须先进行一些检查：

如果该指令用于 Vue自定义组件，则调用该组件的实例{/ 1}}
如果指令用于常规DOM元素（...因为没有$emit() ...），那么会调度本机DOM事件使用.dispatchEvent。

幸运的是，Vue的$emit()听众会回复原生的自定义事件。

应该是全部。下面的演示实现。

＆＃13;

v-on

＆＃13;

Vue.component('my-comp', {
  template: `<input value="click me and check the console" size="40">`
});

Vue.directive('my-directive', {
  bind: function (el, binding, vnode) {

    // say you want to execute your logic when the element is clicked
    el.addEventListener('click', function (e) {
    
      var eventName = 'my-event';
      var eventData = {myData: 'stuff - ' + binding.expression}
      if (vnode.componentInstance) {
      	vnode.componentInstance.$emit(eventName, {detail: eventData}); // use {detail:} to be uniform
      } else {
      	vnode.elm.dispatchEvent(new CustomEvent(eventName, {detail: eventData}));
      }

    })
  }
})

new Vue({
  el: '#app',
  methods: {
    handleStuff(e) { console.log('my-event received', e.detail); }
  }
})

＆＃13;

VueJS Custom指令+发出事件

1 个答案: