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

站长

2023年03月22日 19:27 · 阅读数 19

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

转载自:https://segmentfault.com/a/1190000043570198