vue directive 上下文问题

資深大佬 : faceRollingKB 1

我需要写一个 directive，directive 绑定的值是 data 中的一个状态，bind 只能获取到状态的初始值，update 只能获取到状态的更新值，我在 bind 中给 el 添加了一个点击事件，现在的问题是这个事件只能获取到初始值，我想问一下是否有办法在事件中获取到 directive 的最新值？
已经尝试过如下代码：
export default function(Vue) {
Vue.directive(‘copy’, {
value: ‘-‘,
listener: null,
bind (el, binding) {
const fn = function(){
copyToClipboard(this.value)
}
binding.def.listener = fn.bind(binding.def)
binding.def.value = binding.value
el.addEventListener(‘click’,binding.def.listener)
},
unbind (el, binding) {
el.removeEventListener(‘click’,binding.def.listener)
},
update(el, binding){
binding.def.value = binding.value
}
})
}
但这段代码问题是所有的 directive 实例都会共享同一个 binding.def ，我看了文档并没有发现 directive 有上下文的概念，不知道应该怎么搞

大佬有話說 (3)

資深大佬 : doommm

下面这么写似乎是可以的，不知道有没有更好的办法

“`
<template>
<div>
<div v-copy=”text”>
{{ text }}
</div>

copy.value = binding.value;
const fn = () => {
console.log(‘val’, copy.value);
};
copy.cb = fn;

el.addEventListener(‘click’, fn);
},

componentUpdated(el, binding) {
const copy = Reflect.get(el, ‘__copy__’);
copy.value = binding.value;
},

unbind(el, binding) {
const copy = Reflect.get(el, ‘__copy__’);
el.removeEventListener(‘click’, copy.cb);

Reflect.deleteProperty(el, ‘__copy__’);
},
},
},
data() {
return {
text: ‘small’,
};
},
};
</script>
“`

主資深大佬 : faceRollingKB

@doommm 也就是说可以使用 el 来实现 directive 实例的上下文概念，把所有上下文内容绑定到 el 的 property 上，我先试试看

主資深大佬 : faceRollingKB

@doommm 可行的

export default function(Vue) {
const key = ‘copy’
const property = ‘__v_’+key+’__’
Vue.directive(key, {
bind (el, binding) {
el[property]={
value:binding.value,
listener:function(){
copyToClipboard(this.value)
}
}
el[property].listener = el[property].listener.bind(el[property])
el.addEventListener(‘click’,el[property].listener)
},
unbind (el) {
el.removeEventListener(‘click’,el[property].listener)
},
update(el, binding){
el[property].value = binding.value
}
})
}