首先,v-model可以理解为 Vue团队提供的一个语法糖,他的实现原理其实是 v-bind和input事件的结合。
首先我们给一个 input 添加两个属性
<input type="text" :value="msg" @input="msg = $event.target.value" />
运行之后发现和 v-model 的效果一样也实现了双向的数据绑定。
接下来再聊深一点
我们知道,如果往input上绑定v-model回实现数据的双向绑定,那么如果我们给组件绑定 v-model呢?
我们先用 v-bind和input事件绑定在组件中试试
<model-test :value="msg" @input="msg = $event"></model-test>
要注意的是,这里的value并不是input表单的value属性,他是绑定在组件上的,是一个自定义属性,
同理 input也并不是 input原生事件,而是一个自定义事件,
再之前的文章中有聊过,绑定在组件上的自定义事件,只能通过子组件的 $emit来触发,所以在子组件内,我们添加如下代码
<template>
<div>
<input
type="text"
:value="value"
@input="$emit('input', $event.target.value)"
/>
</div>
</template>
<script>
export default {
props: ["value"],
};
</script>
注意,这里的value为 input表单的属性,input为DOM的原生事件
然后我们运行代码发现,父子组件的数据实现了双向绑定
这时我们再修改父组件内的属性 将value和input事件替换为 v-model
<model-test v-model="msg"></model-test>
发现数据双向绑定仍然可以实现
总结:
1. v-model实现的原理其实就是 :value和input事件。
2.v-model并不是只能绑定在表单元素上,也可以绑定在组件标签上,如果绑定在组件标签上,可以实现父子组件数据的同步也可以理解为父子组件的通信。