此文次要诠释 v -model 另外一种用法，用于双向绑定父子组件的传递的值。
v-model 其实就是:
1. 给子组件的 value 传个变量
2. 监听子组件的 input 事件, 并且把传过来的值赋给父组件的变量
上面是验证示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<father></father>
</div>
<script>
var oApp = document.getElementById('app');
// 子组件
var Child = Vue.extend({
props:{
value:{
type:String,
default:"555555"
}
},
methods: {testVModel() {this.$emit("input","子组件传过来的值")
}
},
mounted(){},
template: `<div id='child'> 我是子组件
<p>value:{{value}}</p>
<button @click="testVModel"> 传值 </button>
</div>
`
})
// 父组件
var Father = Vue.extend({data() {
return {
a: "2224442",
b:"2224442"
}
},
components:{"child":Child},
template: "<div id='father'><p> 我是父组件 </p>" +
"<p> 父组件扭转前的值{{b}}---- 扭转后的值 ----{{a}}</p>" +
"<child v-model='a'></child></div>"
});
var vm = new Vue({
el: '#app',
components:{"father":Father,}
});
</script>
</body>
</html>参考链接:https://blog.csdn.net/weixin_53312997/article/details/126478859