vue directive 上下文问题

› Vue.js

This topic created in 2181 days ago, the information mentioned may be changed or developed.

我需要写一个 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 replies • 2020-05-24 16:46:41 +08:00

doommm

May 24, 2020

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

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

<input type="text" v-model="text" />
</div>
</template>

<script>
export default {
name: 'LabelSmall',
directives: {
copy: {
bind(el, binding) {
const copy = {};
Reflect.defineProperty(el, '__copy__', { value: copy });

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

May 24, 2020

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

faceRollingKB

May 24, 2020

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