- 1） 父組件給子組件傳值
利用Vue的組件機(jī)制缕贡，父親組件通過 v-bind指令給子組件綁定一個(gè)屬性，屬性值為父組件要傳遞的數(shù)據(jù)（變量也可以）拔第，若父親組件中對(duì)應(yīng)的數(shù)據(jù)改變崭倘，子組件中同樣會(huì)改變。
傳遞 父親組件給子組件綁定一個(gè)屬性：如下圖
//傳遞 messageFromParent這個(gè)變量悦析。
<child v-bind:msg="messageFromParent"></child>
//傳遞一個(gè)常量寿桨。
<child v-bind:msg="'我是個(gè)常量'"></child>
子組件接收 父親組件給子組件綁定一個(gè)屬性：如下圖
props 是父組件用來傳遞數(shù)據(jù)的一個(gè)自定義屬性，這里定義組件要接收的屬性及屬性的校驗(yàn)（關(guān)于屬性校驗(yàn)請(qǐng)自行看官方的文檔）
Vue.component('child',{
props:['msg'],
});
相關(guān)示例代碼
<template id="parent">
<div>
<h1>我是父親節(jié)點(diǎn)</h1>
<child v-bind:msg="messageFromParent"></child>
<button @click='changeMsg'>點(diǎn)我改變消息內(nèi)容强戴，子組件內(nèi)信息同時(shí)會(huì)改變</button>
</div>
</template>
<template id="child">
<div>
<h2>{{msg}}</h2>
</div>
</template>
//子組件
Vue.component('child',{
props:['msg'],
template:"#child"
});
//父親組件
Vue.component('parent',{
data(){
return {
messageFromParent:"我是從父親來的文字"
}
},
template:'#parent',
methods:{
changeMsg:function(){
this.messageFromParent="傳遞過來的數(shù)據(jù)改變咯";
}
}
});
//建立vue實(shí)例
var vm=new Vue({
el:"#app",
data:{
}
});
- 2） 子組件給父親組件傳值
<div id='app'>
<parent></parent>
</div>
<template id="parent">
<div>
<h1>我是父親節(jié)點(diǎn)</h1>
<h3>傳遞的信息顯示在這：{{message}}</h3>
<!-- 給子組件綁定一個(gè)自定義事件 diyevname 指定 事件處理函數(shù)為 changeMsg-->
<child @diyevname="changeMsg"></child>
</div>
</template>
<template id="child">
<div>
<button @click='sendMsg'>點(diǎn)我給父親組件傳值</button>
</div>
</template>
//子組件
Vue.component('child',{
template:"#child",
methods: {
sendMsg() {
//發(fā)送信息
this.$emit('diyevname','子組件發(fā)過來的信息');
}
}
});
//父親組件
Vue.component('parent',{
data(){
return {
message:"我是初始消息"
}
},
template:'#parent',
methods:{
changeMsg(newmsg){
this.message=newmsg;
}
}
});
//建立vue實(shí)例
var vm=new Vue({
el:"#app",
data:{}
});
- 3） 非父子關(guān)系組件通信
原理：通過 事件中心 去注冊(cè)事件監(jiān)聽及事件的觸發(fā)亭螟。因?yàn)槊總€(gè) Vue 實(shí)例都實(shí)現(xiàn)了事件接口(Events interface)，通過這個(gè)可以實(shí)現(xiàn)事件的監(jiān)聽及觸發(fā)骑歹。
- vue 代碼
//新建事件中心
var EVENT=new Vue();
//全局組件A
Vue.component('p-a',{
template:'<div class="component"><p>我是A組件</p><button @click="add">點(diǎn)我向B組件發(fā)送信息</button></div>',
methods:{
add(){
//通過事件中心觸發(fā)事件
EVENT.$emit('add',
{
id:21,
content:"花果山水簾洞111111",
time:'2016-12-13 12:14:56'
});
}
}
});
//全局組件B
Vue.component('p-b',{
data(){
return {
msg:'我未接收到事件呢'
}
},
template:"<div class='component'><p>我是B組件预烙，我負(fù)責(zé)接收事件</p>{{msg}}</div>",
created(){
var _self=this;
//創(chuàng)建組件之后監(jiān)聽事件
EVENT.$on('add',function(data){
_self.msg="我接收到事件了，事件參數(shù)"+JSON.stringify(data);
});
}
});
//掛載vue viewModel到DOM =>相當(dāng)于 ng-app
var vm=new Vue({
el:"#app",
data:{
msgs:[],
title:'首頁'
}
});
- Html
<div id="app">
<p-a></p-a>
<p-b></p-b>
</div>
