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://i-blog.csdnimg.cn/blog_migrate/49a04929e141c0c34d8ec24740f19e2f.png)
代码:
<div id="app">
<h2>num1: {
{num1}}</h2>
<h2>num2: {
{num2}}</h2>
<hr>
<cpn :sub_pro_num1="num1"
:sub_pro_num2="num2"
@modify_num1 = "modify_num