接觸vue也差不多半年有余了卷要，有些東西還感覺有點(diǎn)模糊，現(xiàn)在又學(xué)一遍好好總結(jié)一下独榴，夯實(shí)基礎(chǔ)
直接進(jìn)入主題
1僧叉，父子組件通信
父子組件通信是這三種通信，最簡單易懂的棺榔，就是在我們定義組件的時(shí)候使用props寫入需要傳入的數(shù)據(jù)瓶堕，在使用組件的時(shí)候傳入即可，這里需要注意的是vue中對props有 類型檢查功能症歇，建議在實(shí)際開發(fā)中使用類型檢查功能郎笆，減少bug出現(xiàn)的幾率
props:{
name:{
type:String,
default:'這是默認(rèn)值’
}，
age:{
type: Number,
default:18
}
}
接下來看一個(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è)栗子中爆办，我們注冊了一個(gè)父組件balance，顯示余額的功能课梳，和一個(gè)子組件show距辆，控制是否把余額顯示出來的功能，當(dāng)觸發(fā)show組件的on_click()方法時(shí)暮刃，就會觸發(fā)show-balance方法跨算，通過父組件監(jiān)聽了show-balance方法，從而觸發(fā)了show_balance方法（使show）可通過傳入data參數(shù)椭懊，獲取子組件傳入的數(shù)據(jù)（{name:'帥朗朗'}）,把余額顯示出來诸蚕。
在這里大家注意一個(gè)細(xì)節(jié)我們在寫show_balance方法寫成show_balance（）和show_balance的區(qū)別是不加夸號默認(rèn)是this.$emit傳過來的數(shù)據(jù)，加夸號是自己自定義的數(shù)據(jù)氧猬，就接收不到子組件傳過來的數(shù)據(jù)背犯。
3，同級組件的通信
同級組件之間的通訊需要一個(gè)bus總線盅抚，先說一下什么是事件總線漠魏，其實(shí)就是訂閱發(fā)布者模式；比如有一個(gè)bus對象妄均，這個(gè)對象上有兩個(gè)方法柱锹，一個(gè)是on（監(jiān)聽，也就是訂閱）丰包，一個(gè)是emit（觸發(fā)禁熏，也就是發(fā)布），我們通過on方法去監(jiān)聽某個(gè)事件邑彪，再用emit去觸發(fā)這個(gè)事件瞧毙，同時(shí)調(diào)用on中的回調(diào)函數(shù)，這樣就完成了一次事件觸發(fā)寄症；
這是一種設(shè)計(jì)模式升筏，和語言沒有關(guān)系。
vue自帶事件總線的缺點(diǎn)
我們都知道在vue被實(shí)例化之后瘸爽，他就具備了充當(dāng)事件總線對象的能力您访，在他上面掛了兩個(gè)方法，是$emit和$on剪决；
而vue文檔說的很明白灵汪，$emit會觸發(fā)當(dāng)前實(shí)例上的事件檀训，附加參數(shù)都會傳給監(jiān)聽器回調(diào)；由于在實(shí)際工作中享言，我們都是以組件的形式開發(fā)峻凫，每個(gè)組件就是一個(gè)實(shí)例；
所以利用vue自帶的總線能力有很大的局限性览露，最多只能從子組件觸發(fā)到父組件中荧琼，而不能在非父子組件之間傳值；
所以這時(shí)差牛，我們就需要有一個(gè)全局的事件總線對象命锄，讓我們掛載監(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同級組件的通信需要事件總線來調(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組件通過this.bus.$on監(jiān)聽這個(gè)事件韵卤，產(chǎn)生一個(gè)回調(diào)骗污，獲取boy穿過來的參數(shù)。
