是否有可能发出一个自定义事件,从该指令在到该指令所连接的组件。
我期望它按照示例中的描述工作,但事实并非如此。
例:
//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();
(或fns()
在最新的Vue版本中)它将触发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>