'vue的双向绑定是针对表单元素,当然可以自定义组件实现双向绑定。
(外部data的字段值赋值给自定义组件的属性,自定义组件通过本身或者内部触发事件,监听自定义组件事件更改data的字段值)
看下例子:
<input type="text" v-model="message">.
...
data: {
message: "this is a message",
...
}
v-model 作为语法糖,真正实现形式如下:
<input type="text" :value="message" @input="($event) => message = $event.target.value">
1 data中的message赋值到input的value属性,更改了input的value值,是绑定中的单向绑定
2 通过监听input组件的input事件,更改message值,完成双向绑定。
从官网上看到,v-model在内部为不同的表单输入元素使用不同的属性并抛出不同的事件:
text,textarea 使用value属性 与 input事件
select使用value 与 change事件
radio checkbox 使用checked 与change事件
自定义组件实现双向绑定v-model实现如下:
名称为SpecialModel
<template>
<div>
<input :value="spVal" @input='($event) => emitEvent($event.target.value)'>click</Button>
</div>
</template>
<scripts>
model: {
prop: 'spVal', //自定义组件通过该属性获取父组件的字段值
event: 'changeVal' // 父组件通过监听自定义组件发出事件,改变
},
props: {
spVal: {
type: String,
default: 'jack'
}
},
...
methods: {
emitEvent: (val) => {
this.$emit('changeVal',val);
}
}
</script>
父组件中使用自定义组件:
<template>
<div>
<SpecialModel v-model="specialValue" />
</div>
</template>
<scripts>
data: () => {
return {
specialValue: 'balabalala',
....
}
...
</scripts>
等价于(v-model语法糖的作用)
<SpecialModel :spVal='specialValue' @changeVal="(val) => specialValue = val" />