Vue.js - 從指令發出事件

Question

是否有可能從與該指令被附着在組件的指令發出一個自定義事件。

我期待它像示例中描述的那樣工作，但事實並非如此。

示例：

//Basic Directive
<script>
  Vue.directive('foo', {
    bind(el, binding, vnode) {
      setTimeout(() => {
        //vnode.context.$emit('bar'); <- this will trigger in parent
        vnode.$emit('bar');
      }, 3000);
    }
  });
</script>


//Basic Component
<template>
  <button v-foo @bar="change">{{label}}</button>
</template>
<script>
  export default{
    data() {
      return {
        label: 'i dont work'
      }
    },
    methods: {
      change() {
        this.label = 'I DO WORK!';
      }
    }
  }
</script>

關於此事的任何想法？ 我錯過了什么嗎？

JSFiddle： https ://jsfiddle.net/0aum3osq/4/

更新 1：

好的，我發現如果我調用vnode.data.on.bar.fn(); （或最新 Vue 版本中的fns() ）在指令中它會觸發bar事件處理程序。

更新 2：

臨時解決方案：

  /*temp. solution*/
  var emit = (vnode, name, data) => {
    var handlers = vnode.data.on;

    if (handlers && handlers.hasOwnProperty(name)) {
      var handler = handlers[name];
      var fn = handler.fns || handler.fn;

      if (typeof fn === 'function') {
        fn(data);
      }
    }
  } 

//Basic Directive
<script>
  Vue.directive('foo', {
    bind(el, binding, vnode) {
      setTimeout(() => {
        emit(vnode, 'bar');
      }, 3000);
    }
  });
</script>

Answer 1

所以我在 Vue 2+ 中使用的解決方案（考慮到目前還沒有答案）：

在指令添加方法中：

var emit = (vnode, name, data) => {
  var handlers = (vnode.data && vnode.data.on) ||
    (vnode.componentOptions && vnode.componentOptions.listeners);

  if (handlers && handlers[name]) {
    handlers[name].fns(data);
  }
}

並這樣稱呼它：

bind(el, binding, vnode) {
  emit(vnode, 'bar' , {some: 'event', data: 'here'});
}

一種方法的好處：

1 在您的項目中保持相同的代碼風格，這意味着每個處理程序都可以聲明為
v-on:handler_name並以有意義的（對於開發人員）方式處理。 其他解決方案，例如將回調作為參數發送，如果不深入研究文檔/代碼，有時會令人困惑且不明顯。

2 使用內置事件系統還可以優雅地處理事件對象。 例如，此代碼將完美運行：

<button v-foo @bar="bar(1, $event, 2)">{{label}}</button>
...
methods: {
  bar(one, event, two) { console.log(one, event, two); }
} 

---

編輯：

在 v2.1+ 中，您可以在指令綁定中使用它：

vnode.context.$emit(eventname)

Answer 2

您的解決方案對我不起作用。 事實上 vnode.data.on 總是未定義的

觸發事件的方法是

 vnode.child.$emit('myevent');

希望這會有所幫助。

Answer 3

我知道這是一個老問題，但是如果有人對此有問題並且無法正常工作。 您可以使用 javascript 自定義事件事件。

    vue.directive('click',{bind(el, binding, vnode) {
        el.addEventListener('click', (e)=>{
            const event = new CustomEvent('customevent', {detail: {
                                                          custom: "data", 
                                                          can: "be", 
                                                          in: "detail property"}, bubbles: true});
            el.dispatchEvent(event);
        })
    }
})

現在我可以像這樣使用它

<div v-click @customevent="func">hello world</div>

我不必設置$event因為默認值是作為最后一個參數發出的標准。 這個事件有一個detail屬性，在這種情況下它包含你的自定義數據這個對象：

{custom: "data", 
 can: "be", 
 in: "detail property"}

源代碼https://github.com/vuejs/vue/issues/7147

Answer 4

上面的答案很好，但其中一些已經過時了。 這是我通過將它們集成到一個可行的 POC 中來解決問題的方法。

// src/directives/ClickOutside.js
export default {
  stopProp(e) {
    e.stopPropagation();
  },
  bind(el, binding, vnode) {
    el._clickOutside = e => {
      vnode.context.$emit(binding.expression, e);
    };
    el.addEventListener('click', binding.def.stopProp);
    document.body.addEventListener('click', el._clickOutside);
  },
  unbind() {
    if (!el._clickOutside) {
      return;
    }
    el.removeEventListener('click', binding.def.stopProp);
    document.body.removeEventListener('click', el._clickOutside);
    delete el._clickOutside;
  }
};

// src/directives/index.js
import Vue from 'vue';
import ClickOutside from './ClickOutside';

Vue.directive('ClickOutside', ClickOutside);

在 main.js 中導入指令：

// src/main.js
import './directives';

使用指令來監聽 Vue 組件中的事件發射：

// src/components/Component.vue
<template>
  <!-- Please fill in sensible context. This example doesn't really care about the DOM presentation -->
  <div @click="showElement" v-click-outside="hideElement">
    <div v-if="shouldShow">Hello</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shouldShow: true
    };
  },
  mounted() {
    this.$on('hideElement', this.hideElement);
  },
  destroyed() {
    this.$off('hideElement', this.hideElement);
  },
  methods: {
    showElement() {
      this.shouldShow = true;
    },
    hideElement() {
      this.shouldShow = false;
    }
  }
};
</script>

基本上，在vnode.context.$emit ，該binding.expression是字符串（即，在這個例子中“hideElement”），你在宣布v-close-outside 。 要從指令中檢索發射，請使用this.$on('hideElement')來收聽它。

Answer 5

您可以發出自定義本機 javascript 事件。 使用 node.dispatchEvent 創建一個從節點調度事件的指令

let handleOutsideClick;
Vue.directive('out-click', {
    bind (el, binding, vnode) {

        handleOutsideClick = (e) => {
            e.stopPropagation()
            const handler = binding.value

            if (el.contains(e.target)) {
                el.dispatchEvent(new Event('out-click')) <-- HERE
            }
        }

        document.addEventListener('click', handleOutsideClick)
        document.addEventListener('touchstart', handleOutsideClick)
    },
    unbind () {
        document.removeEventListener('click', handleOutsideClick)
        document.removeEventListener('touchstart', handleOutsideClick)
    }
})

哪個可以這樣使用

h3( v-out-click @click="$emit('show')" @out-click="$emit('hide')" )

Answer 6

最簡單的方法就是像這樣在el上使用 dispatchEvent

el.dispatchEvent(new Event('change'));

Answer 7

@euvl 的解決方案很好，但我認為將函數作為參數傳遞給指令更容易、更清晰。 似乎也簡化了指令的接口。

<script>
  Vue.directive('foo', {
    bind(el, binding) {
      setTimeout(() => {
        binding.value();
      }, 3000);
    }
  });
</script>

<template>
  <button v-foo="change">{{label}}</button>
</template>

<script>
  export default{
    data() {
      return {
        label: 'i dont work'
      }
    },
    methods: {
      change() {
        this.label = 'I DO WORK!';
      }
    }
  }
</script>