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

https://cn.vuejs.org/v2/guide/components.html#在组件上使用-v-model我们常在input上使用双向数据绑定，实现更新view的时候，model的数据也自动被更新了，model更新的时候，view也自动更新。如果我们在自定义组件中使用v-model，来实现实例和组件间的双向数据绑定。v-model的绑定原理：v-model的语法糖：...

努力_才幸福

4499人浏览 · 2018-06-11 14:51:28

努力_才幸福 · 2018-06-11 14:51:28 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^