关于vue.js:vmodel另类用法实现父子组件数据双向绑定

47次阅读

共计 932 个字符，预计需要花费 3 分钟才能阅读完成。

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

正文完