vue.js父子组件通信：1，父组件向子组件传递数据，通过props，注意数据绑定是单向的(借鉴了react);2,子组件向父组件传递数据，通过在子组件自定义事件，使用this.$dispatch()触发自定义事件，事件冒泡到父组件，同时在父组件内通过events或者methods，声明回调函数，同时通过this.$dispatch()传递的参数将传给父组件在events和methods中的会调函数，此时可以在回调函数中操作参数。
1，父组件向子组件传递数据
<div id="prop">
<input v-model="parentMSG">
<child :my-message="parentMSG"></child>
</div>
//props传递父组件数据,默认为单向绑定，注意:字面量语法传递的是字符串，如需要传递实际数值，需使用动态语法v-bind:或缩写模式:（也即可以看成是表达式的方式）,支持修饰符.sync和.once绑定修饰符，绑定动态props，注意使用驼峰形式的props时，需要转换为短横杠的形式
Vue.component("child",{
props:{
myMessage:{
type:String,
required:true,
coerce:function(str){
return str.slice(2);
}
}
},
template:"<span>{{myMessage}}</span>"
});
var propVM=new Vue({
el:"#prop",
data:{
parentMSG:""
}
})
//此例中我们通过v-model将input中的数据绑定到父组件模板中，此时input和父组件数据是双向绑定,input数据传递给在子组件中定义的props，再将props传递给子组件中的span子元素，实时更新
2，子组件向父组件传递数据
<template id="child-template">
<input v-model="msg">
<button v-on:click="notify" >触发自定义事件</button>
{{childmsg}}
</template>
<div id="events-example">
<p>Message:{{messages|json}}</p>
//通过methods方法时，注意需要在父组件模板中的子组件上绑定事件
<child v-on:child-msg="handleIt"></child>
//通过events方法时，只需在父组件的选项对象中events，写入child-msg方法
//我们还可以在父组件事件监听回调中，通过props将数据传回个子组件
<child :childmsg="messages"></child>
</div>
Vue.component("child",{
template:"#child-template",
data:function(){
return {msg:"hello"};
},
methods:{
//这里是button按钮点击后的事件处理函数
notify:function(){
if(this.msg.trim()){
//在这里我们绑定了一个子定义的事件child-msg,同时传入一个参数,此参数可以传递给父组件的事件回掉函数
this.$dispatch("child-msg",this.msg);
this.msg="";
}
}
}
});
var eventParent=new Vue({
el:"#events-example",
data:{
messages:[]
},
props:{parentprop:""},
//我们可以在这里注册子组件自定义事件监听回调
methods:{
// handleIt:function(msg){
// console.log("子组件回调函数");
// this.messages.push(msg);
// }
},
//同时我们也可以在events中注册子组件自定义事件监听回调
events:{
"child-msg":function(msg){
this.messages.push(msg);
this.parentprop=msg;
console.log("子组件事件被触发");
}
}
})
