vue自定义指令的问题

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

回到顶部