v-model另类用法——实现父子组件数据双向绑定

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

v-model另类用法——实现父子组件数据双向绑定

阳哥

引用和评论

vue数据响应式的原理（通俗易懂）附源码

手写一个动态海洋和天空效果的vue hooks

原生electron起步-从零到一完成构建和打包

更强大、更灵活！ defineModel 重新定义双向绑定

7天撸完KTV点歌系统,含后台管理系统(完整版)

vue3使用百度地图

你好，我是冴羽，我写了一套《前端大佬成长之路》