VueJS 커스텀 디렉티브 + import 이벤트

VueJS 커스텀 디렉티브 + import 이벤트

할 필요가 있다$emit커스텀 디렉티브로부터의 이벤트가능합니까?

directive.directive:

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

요소.vue:

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

그게 가능한지, 무슨 속임수가 있는지 아세요?

고마워요.

A <div>이 아니다VueComponent그 말은 즉, 이 시스템에는$emit방법.

따라서 Vue 커스텀 디렉티브에서 이벤트를 내보내려면 먼저 몇 가지 검사를 수행해야 합니다.

• Vue 커스텀컴포넌트에서 디렉티브가 사용된 경우 해당 컴포넌트의 인스턴스를 호출합니다.
• 디렉티브가 일반 DOM 요소에서 사용된 경우(...가 존재하지 않기 때문에)$emit()...)를 사용하여 네이티브 DOM 이벤트를 디스패치합니다.

다행히 Vue's는v-on청취자는 네이티브 커스텀이벤트에 응답합니다

그게 전부일 거야.이하의 데모 실장.

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); }
  }
})

<script src="https://unpkg.com/vue@2.5.15/dist/vue.min.js"></script>

<div id="app">
  <div v-my-directive.modifier="'native element'" @my-event="handleStuff">CLICK ME AND CHECK THE CONSOLE</div>
  <hr>
  <my-comp v-my-directive.modifier="'custom component'" @my-event="handleStuff"></my-comp>
</div>

언급URL : https://stackoverflow.com/questions/49264426/vuejs-custom-directive-emit-event