使用
v-model
可以将响应式对象的属性绑定到 html 组件
<input v-model="myObject.property" />
但是,当我将
myObject.property
绑定到我的自定义指令时:
<input v-customDirective="myObject.property" />
可以通过
binding.value
访问该值 - 并且该值不是反应性的
我试图找出他们如何在 vue 中做到这一点 - 但我没有成功。如何实现像数据绑定这样的v模型?
更新:
我对
myObject.property
功能进行了 updated(el, binding, vnode, prevVnode)
更改。但我想要
directives: {
'custom-input': {
created(el, binding) {
el.value = binding.value;
el.addEventListener('input', () => {
// ---- this does not work ------
binding.value = el.value;
});
},
updated(el, binding) {
console.log('Value has updated', binding.value);
}
},
},
使用此语法无法实现您想要的效果,因为
myObject.property
已展开并作为值传递给指令,并且您无法更改 JS 中按值传递的任何变量。
此外
myObject.property
字符串在运行时不可用,您无法猜测指令值的来源。
最接近您想要的可以通过提供绑定到对象属性的引用来完成:
<script setup>
import { reactive , toRef } from 'vue'
const myObject= reactive({property: 'Hello World!'});
const vCustomDirective = (el, {value})=>{
el.value = value.value;
el.addEventListener('input', e => value.value = el.value);
}
</script>
<template>
<h1>{{ myObject }}</h1>
<input v-customDirective="toRef(myObject, 'property')" />
</template>