Vue中利用v-model实现父子组件间的双向通信

最新推荐文章于 2024-08-15 12:07:58 发布

努力_才幸福

最新推荐文章于 2024-08-15 12:07:58 发布

阅读量4.4k

点赞数

分类专栏： vue js

本文链接：https://blog.csdn.net/weixin_38098192/article/details/80624644

版权

js 同时被 2 个专栏收录

67 篇文章 1 订阅

订阅专栏

vue

24 篇文章 0 订阅

订阅专栏

https://cn.vuejs.org/v2/guide/components.html#在组件上使用-v-model

我们常在input上使用双向数据绑定，实现更新view的时候，model的数据也自动被更新了，model更新的时候，view也自动更新。

如果我们在自定义组件中使用v-model，来实现实例和组件间的双向数据绑定。

v-model的绑定原理：

v-model的语法糖：

<input
     :value="something"
     @input="something=$event.target.value"
/>

所以在组件上使用时，则简化成

<custom-input
    :value="something"
    @input="something=$event"
>    
</custom-input>

为了使带有v-model的组件正常工作，所以：

1.将带有v-model的组件通过v-model绑定实例中date的值，然后在此组件中使用prop接受传过来的值

props:{value:Number},

2.子组件利用$emit触发input事件，并传入新值给父组件。

this.$emit('input',this.val)

<body>
    <div id="app">
        <my-component v-model='msg'></my-component>
        msg:{{msg}}
        <my-counter v-model="num"></my-counter>
        num:{{num}}
    </div>
</body>
<script>  
    Vue.component('my-component',{
        template:`<div>
                    <input  type="text" :value="currentValue" @input="handleInput">
                </div>
        `,
        props:['value'],//接受父组件传递过来的value值
        data:function(){
            return {
                currentValue:this.value//将prop属性绑定到data属性上，以便修改prop属性（vue是不允许直接修改prop属性的值的）

            }
        },
        methods:{
            handleInput(event){
                var value =event.target.value;
                this.$emit('input',value);//触发input事件，并传入新的值
            }
        }
    })
    Vue.component('my-counter',{
        template:`
            <div>
                <h1>{{value}}</h1>
                <button @click="plus">++</button>
                <button @click="minu">--</button>
            </div>
        `,
        props:{
            value:Number
        },
        data:function(){
            return {
                val:this.value
            }
        },
        methods:{
            plus(){
                this.val=this.val+1;
                this.$emit('input',this.val)
            },
            minu(){
                this.val=this.val-1;
                this.$emit('input',this.val)
            },
        }
    })
    new Vue({
        el:'#app',
        data:{
            msg:'hello world',
            num:0
        }
    })
</script>