这实际上就是 input
实现 v-model
的精髓,通过修改 AST 元素,给 el
添加一个 prop
,相当于我们在 input
上动态绑定了 value
,又给 el
添加了事件处理,相当于在 input
上绑定了 input
事件,其实转换成模板如下:
<input
v-bind:value="message"
v-on:input="message=$event.target.value">
其实就是动态绑定了 input
的 value
指向了 messgae
变量,并且在触发 input
事件的时候去动态把 message
设置为目标值,这样实际上就完成了数据双向绑定了,所以说 v-model
实际上就是语法糖。
let Child = {
template: '<div>'
+ '<input :value="msg" @input="updateValue" placeholder="edit me">' +
'</div>',
props: ['msg'],
model: {
prop: 'msg',
event: 'change'
},
methods: {
updateValue(e) {
this.$emit('change', e.target.value)
}
}
}
let vm = new Vue({
el: '#app',
template: '<div>' +
'<child v-model="message"></child>' +
'<p>Message is: {{ message }}</p>' +
'</div>',
data() {
return {
message: ''
}
},
components: {
Child
}
})