首先，v-model是v-bind与v-on的语法糖
背后做了两件事：
v-bind绑定了一个value属性v-on指令给当前元素绑定input事件
在使用
v-model时
- 接收一个
value属性- 在有新的value时触发
input事件
总结：
1.绑定value值 （如属性值total）
2.绑定了input事件，这时只要一触发input事件，并且把this.count传递过去，input事件就会接收一个this.count。然后把this.count赋值给total
（$emit的代码，实际上会触发一个input事件，input输入的参数就是传递给v-model,绑定的属性的值）
v-model其实就是绑定了input事件，当触发input的时候，input事件就会自动接到到，刚刚传递过来的参数。
然后把接收到的参数赋值给已经绑定的total。
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 父子通信 -->
<div id="app">
你现在的银行卡余额是{{ total }}
<!-- <son-component @change="changeTotal"></son-component> -->
<!--用v-model代替自定义事件-->
<son-component v-model="total"></son-component>
<!-- <input type="text" v-model="abc">{{abc}} -->
<!--为啥input v-model绑定就可以实时的渲染呢？原理就是-->
v-model做的两件事：
<br>
1.v-bind绑定一个value属性（首先绑定了total,然后给子组件绑定了input事件，一旦触发了input事件，就会加1000，得把这个加1000的参数传递进去，接着input事件接收这个this.count，v-model绑定的就会拿到加1000，就会实时更新）
<br>
2.v-on指令给当前元素绑定input事件
<br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component('son-component',{
props:['myMsg'],
template: '<div>\
<button @click="addBtn">+1000</button>\
</div>',
data(){
return{
count: 20000
}
},
methods:{
addBtn(){
this.count = this.count +1000;
// this.$emit('change',this.count)
// 触发input事件
this.$emit('input',this.count)
},
// reduceBtn(){
// this.count = this.count - 1000;
// this.$emit('change', this.count)
// }
}
})
var app = new Vue({
el:'#app',
data: {
total: 20000,
abc: '渲染渲染'
},
// methods:{
// changeTotal(value){
// this.total = value
// }
// }
})
</script>
</body>
</html>
