-
v-model 语法糖
v-model 是官方封装的指令，实现了父子组件的双向数据绑定，其实是官方提供的语法糖果
<input v-model="iptVal"/>
// 等价于
<input v-bind:value="iptVal" v-on:input="iptVal = $event.target.value"/>
// 即
<input :value="iptVal" @input="iptVal = $event.target.value"/>
// 绑定iptVal参数给子组件，通过监听input事件，把value赋值给iptVal
$event 在内敛语句处理器中访问原始的DOM事件，可以获取特殊变量$event
-
在自定义组件中使用v-model
两种处理方法
- 老版本
<!-- 自定义zInput组件 -->
<template>
<input type="text" v-model="val" @input="iptInput"/>
</template>
<script>
export default {
name: "zInputOne",
props: {
value: String //在props接受父组件传递数据
},
data(){
return {
val: this.value // 内部值和value进行关联
}
},
watch: {
value(val){ // 监听父组件传递数据，更新内部值
this.val = val
}
},
methods: {
iptInput(){
// 通过$emit触发input事件，将内部值传递给给父组件
this.$emit('input', this.val)
}
}
}
</script>
- v2.2.0+ 新增 model通过model属性实现
<template>
<input type="text" v-model="val" @input="iptInput"/>
</template>
<script>
export default {
name: "zInputTwo",
model: { // 定义model
prop: 'value', // 绑定prop传递的值
event: 'input' // 定义触发事件名称
},
props: {
value: String // 接受父组件传递的值
},
data(){
return {
val: this.value // 关联值
}
},
methods: {
iptInput(){
// 通过$emit触发input（model内定义）事件，将内部值传递给给父组件
this.$emit('input', this.val)
}
}
}
</script>
第一种实现方式弊端：只能通过定义value和触发input
第二种实现方式：可以接受任意变量，触发任意自定义事件
-
sync修饰符（v2.3.0+ 新增）
<template>
<input type="text" v-model="val" @input="iptInput">
</template>
<script>
export default {
name: "syncAndUpdate",
props: {
value: String
},
data(){
return {
val: this.value // 关联值
}
},
methods: {
iptInput(){
// 通过触发update:value 触发事件，将值传给父组件
this.$emit('update:value', this.val)
}
}
}
</script>
<!-- 使用 -->
<sync-and-update :value.sync="thirdValue"></sync-and-update>
sync实现的好处，可是定义多个值，进行父子组件的数据绑定。
