此文次要诠释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