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