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("子组件事件被触发");
}
}
})