Vue.js的组件：父组件与子组件的数据联系 之 双向绑定

//js
//看代码

Vue.component('my-input',{
    props['myprops'],
    template:'<input v-bind:value="myprops" 
    v-on:input="updateValue($event.target.value)">',
    methods:{
        updateValue":function(value){
            var myValue = value; //将输入的文本框内容传来
            this.$emit('shijian',myValue); //自定义事件，并传参
        }
    }
})

var app5 = new Vue({
    el:'#app5',
    data:{
        message:''
    },
    method:{
        fatherValue:function(myValue){
            this.message = myValue;
        }
    }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

//html
<div id="app5">
    //实时显示message的值
    <p>{{message}}</p> 
    //传统的双向绑定
    <input v-model="message"> 
     //父组件与子组件的双向绑定
    <my-input v-bind:value="message" v-on:shijian="fatherValue"></my-input> 
</div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

梳理一下程序运行的流程。 
1、子组件通过v-on:input="updateValue($event.target.value)" 触发input事件，获取输入的值，作为参数传给子模板的方法updateValue. 
2、在updateValue方法里，定义一个自定义事件，并将获取的参数暴露给父模板。 
3、父模板在前端（html）中使用v-on:shijian="fatherValue" 捕获子组件提供的参数和自定义事件。并指向一个方法fatherValue . 
4、fatherValue 方法使用了来自子组件的参数，并赋给了父组件的变量。从而改变了父组件变量的值。