vue自定义指令的问题
我自定义了一个指令,用来给输入框绑定一个 input 事件,获取输入框的 value 的长度,在 update 钩子中用 console.log 输出了一些字符。我给页面上多个输入框使用了这个自定义指令后,任何一个输入框触发input事件,所有的指令都会在控制台输出,并不是仅仅只有触发 input 事件的那个输入框。
请教这是什么原因呢?
//......bind: function (el) {
//......
el.addEventListener('input', ...)
},
update: function(el) {
console.log(el);
}
<el-input v-mydirective /><el-input v-mydirective />
<el-input v-mydirective />
回答:
你是不是有修改data?修改data触发rerender,从而触发指令update hook被调用
回答:
可以先看官网的定义:
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
你这个需求可以这么写,简单贴下代码,供参考:
<template> <div id="app">
{{ len }}
<input v-foo:len />
{{ len2 }}
<input v-foo:len2 />
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
len: 0,
len2: 0,
};
},
directives: {
foo: {
bind(el, binding, vnode) {
const { arg } = binding;
el.addEventListener("input", (e) => {
if (arg && vnode.context[arg] !== undefined) {
vnode.context[arg] = e.target.value.length;
}
});
},
},
},
};
</script>
以上是 vue自定义指令的问题 的全部内容, 来源链接: utcz.com/p/936755.html