v-model数据绑定原理:v-model封装了v-bind和v-on两个指令,当值改变时首先通过v-on触发事件并改变组件的值,然后使用v-bind将输入框的值保存起来。在高版本的vue【测试为2.6+】中,不需要使用v-bind属性来保存值。
样例说明:
父组件data中的num1、num2绑定给了子组件,在子组件的输入框中改变子组件值,同时会利用输入框的input事件改变子组件data中的值,然后同过$emit触发父组件事件改变num1、num2。值1与值2是1:10的关系。
![](https://img-blog.csdnimg.cn/20200114095847885.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIxNzk0Mg==,size_16,color_FFFFFF,t_70)
代码:
<div id="app">
<h2>num1: {
{num1}}</h2>
<h2>num2: {
{num2}}</h2>
<hr>