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

之前有说到，父组件传数据到子组件是通过组件的属性

props

来实现的，这是一种单向绑定。父可以影响子，子不能影响父。

但是子可以通过自定义事件来让自己的数据影响到父。

只要把这两种方法结合起来，就可以实现父与子数据的双向绑定。

//js
/*为了方便理解过程，把v-model拆分成v-bind,和v-on:input="$event.target.value"*/

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;
}
}
})

//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、子组件通过

v-on:input="updateValue($event.target.value)"

触发input事件，获取输入的值，作为参数传给子模板的方法updateValue.

2、在updateValue方法里，定义一个自定义事件，并将获取的参数暴露给父模板。

3、父模板在前端（html）中使用

v-on:shijian="fatherValue"

捕获子组件提供的参数和自定义事件。并指向一个方法

fatherValue

.

4、

fatherValue

方法使用了来自子组件的参数，并赋给了父组件的变量。从而改变了父组件变量的值。

5、父组件的值的改变导致子组件的属性props的变化。

6、从而改变了子组件的值。因为子组件通过props绑定了该值。