VueJS 自定义指令 + 发出事件
VueJS Custom directive + emit event
我需要 $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>
你知道这是否可行或有什么技巧吗?
谢谢
A <div>
不是 VueComponent
,这意味着它没有 $emit
方法。
因此,要使您的 Vue 自定义指令发出事件,您必须先进行一些检查:
- 如果指令在 Vue 自定义组件中使用,则调用该组件实例的
$emit()
- 如果指令用于 常规 DOM 元素(...因为没有
$emit()
...),则 使用 .dispatchEvent
. 发送原生 DOM 事件
幸运的是,Vue 的 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>
我需要 $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>
你知道这是否可行或有什么技巧吗?
谢谢
A <div>
不是 VueComponent
,这意味着它没有 $emit
方法。
因此,要使您的 Vue 自定义指令发出事件,您必须先进行一些检查:
- 如果指令在 Vue 自定义组件中使用,则调用该组件实例的
$emit()
- 如果指令用于 常规 DOM 元素(...因为没有
$emit()
...),则 使用.dispatchEvent
. 发送原生 DOM 事件
幸运的是,Vue 的 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>