接觸vue也差不多半年有余了，有些東西還感覺(jué)有點(diǎn)模糊，現(xiàn)在又學(xué)一遍好好總結(jié)一下，夯實(shí)基礎(chǔ)
直接進(jìn)入主題
1，父子組件通信
父子組件通信是這三種通信，最簡(jiǎn)單易懂的，就是在我們定義組件的時(shí)候使用props寫入需要傳入的數(shù)據(jù)，在使用組件的時(shí)候傳入即可，這里需要注意的是vue中對(duì)props有 類型檢查功能，建議在實(shí)際開發(fā)中使用類型檢查功能，減少bug出現(xiàn)的幾率
props:{
name:{
type:String,
default:'這是默認(rèn)值’
}，
age:{
type: Number,
default:18
}
}
接下來(lái)看一個(gè)栗子
<body>
<div id="app">
<alert message="帥朗朗"></alert>
</div>
<script>
var app = new Vue({
el:'#app',
components:{
alert:{
template:'<button @click="onclick()">點(diǎn)我</button>',
props:{
message:{
type:String,
default:'我是默認(rèn)值'
}
},
methods:{
onclick:function(){
return alert(this.message)
}
}
}
}
})
</script>
</body>
這是一個(gè)彈出框組件，當(dāng)我們使用組件的時(shí)候，傳入message的值，不傳入就是用默認(rèn)值。
2，子父組件的通信
子父組件通信，顧名思義，是子組件向父組件通信（喊話），使用vue中的$emit方法實(shí)現(xiàn)，子組件使用$emit觸發(fā)一個(gè)事件，在父組件中監(jiān)聽此事件即可。
<body>
<div id="app">
<balance></balance>
</div>
<script>
Vue.component('balance',{
template:`
<div>
<show @show-balance="show_balance"></show>
<div v-if="show">你的余額：99￥</div>
</div>
`,
data(){
return {
show:false
}
},
methods:{
show_balance(data){
this.show=true
show_balance
}
},
})
Vue.component('show',{
template:`
<button @click="on_click">顯示余額</button>
`,
methods: {
on_click(){
this.$emit('show-balance',{name:'帥朗朗'})
}
}
})
var app = new Vue({
el:'#app',
})
</script>
</body>
在這個(gè)栗子中，我們注冊(cè)了一個(gè)父組件balance，顯示余額的功能，和一個(gè)子組件show，控制是否把余額顯示出來(lái)的功能，當(dāng)觸發(fā)show組件的on_click()方法時(shí)，就會(huì)觸發(fā)show-balance方法，通過(guò)父組件監(jiān)聽了show-balance方法，從而觸發(fā)了show_balance方法（使show）可通過(guò)傳入data參數(shù)，獲取子組件傳入的數(shù)據(jù)（{name:'帥朗朗'}）,把余額顯示出來(lái)。
在這里大家注意一個(gè)細(xì)節(jié)我們?cè)趯憇how_balance方法寫成show_balance（）和show_balance的區(qū)別是不加夸號(hào)默認(rèn)是this.$emit傳過(guò)來(lái)的數(shù)據(jù)，加夸號(hào)是自己自定義的數(shù)據(jù)，就接收不到子組件傳過(guò)來(lái)的數(shù)據(jù)。
3，同級(jí)組件的通信
同級(jí)組件之間的通訊需要一個(gè)bus總線，先說(shuō)一下什么是事件總線，其實(shí)就是訂閱發(fā)布者模式；比如有一個(gè)bus對(duì)象，這個(gè)對(duì)象上有兩個(gè)方法，一個(gè)是on（監(jiān)聽，也就是訂閱），一個(gè)是emit（觸發(fā)，也就是發(fā)布），我們通過(guò)on方法去監(jiān)聽某個(gè)事件，再用emit去觸發(fā)這個(gè)事件，同時(shí)調(diào)用on中的回調(diào)函數(shù)，這樣就完成了一次事件觸發(fā)；
這是一種設(shè)計(jì)模式，和語(yǔ)言沒(méi)有關(guān)系。
vue自帶事件總線的缺點(diǎn)
我們都知道在vue被實(shí)例化之后，他就具備了充當(dāng)事件總線對(duì)象的能力，在他上面掛了兩個(gè)方法，是$emit和$on；
而vue文檔說(shuō)的很明白，$emit會(huì)觸發(fā)當(dāng)前實(shí)例上的事件，附加參數(shù)都會(huì)傳給監(jiān)聽器回調(diào)；由于在實(shí)際工作中，我們都是以組件的形式開發(fā)，每個(gè)組件就是一個(gè)實(shí)例；
所以利用vue自帶的總線能力有很大的局限性，最多只能從子組件觸發(fā)到父組件中，而不能在非父子組件之間傳值；
所以這時(shí)，我們就需要有一個(gè)全局的事件總線對(duì)象，讓我們掛載監(jiān)聽事件和觸發(fā)事件；
Vue.prototype.bus = new Vue() //在Vue的原型上掛一個(gè)bus
這樣我們就可以在整個(gè)項(xiàng)目中使用事件總線bus了，
<body>
<div id="app">
<boy></boy>
<girl></girl>
</div>
<script>
Vue.prototype.bus=new Vue() //vue同級(jí)組件的通信需要事件總線來(lái)調(diào)度事件,
Vue.component('girl',{
template:
`<div>
<div>the boy say:{{this.message}}</div>
</div>`,
data(){
return {
message:"default"
}
},
mounted () {
this.getMessage()
},
methods:{
getMessage(){
this.bus.$on('appointment',(data)=>{
this.message=data
console.log(this.message)
})
console.log(this.message)
}
}
})
Vue.component('boy',{
template:`<div>
<button @click="shout">boy</button>
</div>`,
methods: {
shout(){
this.bus.$emit('appointment','今天6點(diǎn)半老地方見')
}
}
})
var app = new Vue({
el:'#app',
})
</script>
</body>
在上面這個(gè)栗子中，使用在vue的prototype上掛一個(gè)bus，也是一個(gè)Vue的實(shí)例，這樣girl和boy組件都可以使用bus了，我們現(xiàn)在boy組件中用this.bus.$emit觸發(fā)一個(gè)appointment方法，并且在傳入數(shù)據(jù)“今天6點(diǎn)半老地方見”.然后在girl組件通過(guò)this.bus.$on監(jiān)聽這個(gè)事件，產(chǎn)生一個(gè)回調(diào)，獲取boy穿過(guò)來(lái)的參數(shù)。
