寫在前面
之前每次寫項(xiàng)目的時(shí)候老是忘記vue的組件之間的傳參，很不方便褪测，每次都是現(xiàn)查喝滞，趁著這次折騰非父子組件的傳參，學(xué)習(xí)記錄下來膏秫，以方便以后學(xué)習(xí)使用右遭。
1.父組件傳遞數(shù)據(jù)給子組件
父組件寫法
<parent>
<child :child-msg="msg"></child>//這里必須要用 - 代替駝峰
</parent>
data(){
return {
msg: [1,2,3]
};
}
子組件接收寫法
第一種：
props: ['childMsg']
第二種：
props: {
childMsg: Array //這樣可以指定傳入的類型，如果類型不對缤削，會(huì)警告
}
第三種：
props: {
childMsg: {
type: Array,
default: [0,0,0] //這樣可以指定默認(rèn)的值
}
}
可以根據(jù)自己的需要選擇使用哪一種
2.子組件與父組件通信
vue文檔中是這么解釋的：如果子組件想要改變數(shù)據(jù)呢窘哈？這在vue中是不允許的，因?yàn)関ue只允許單向數(shù)據(jù)傳遞亭敢，這時(shí)候我們可以通過觸發(fā)事件來通知父組件改變數(shù)據(jù)滚婉，從而達(dá)到改變子組件數(shù)據(jù)的目的.
子組件寫法
<template>
<div @click="up"></div>
</template>
methods: {
up() {
this.$emit('upup','hehe'); //主動(dòng)(dispatch)觸發(fā)upup方法，'hehe'為向父組件傳遞的數(shù)據(jù)
}
}
父組件寫法
<div>
<child @upup="change" :msg="msg"></child> //監(jiān)聽子組件觸發(fā)的upup事件,然后調(diào)用change方法
</div>
methods: {
change(msg) {
this.msg = msg;
}
}
3.非父子組件通信
vue文檔中是這么解釋的：如果2個(gè)組件不是父子組件那么如何通信呢帅刀？這時(shí)可以通過eventHub來實(shí)現(xiàn)通信.
所謂eventHub就是創(chuàng)建一個(gè)事件中心让腹，相當(dāng)于中轉(zhuǎn)站，可以用它來傳遞事件和接收事件.
第一種：
創(chuàng)建一個(gè)公共的js扣溺，美其名曰：bus.js作為中間倉庫來傳值骇窍。
//bus.js
import Vue from 'vue'
export default new Vue()
組件A中
<template>
<div>
A組件:
'$emit' 官網(wǎng)解釋: ---事件觸發(fā)器
<span>{{elementValue}}</span>
<input type="button" value="點(diǎn)擊觸發(fā)" @click="elementByValue">
</div>
</template>
<script>
// 引入公共的bus，來做為中間傳達(dá)的工具
import Bus from './bus.js'
export default {
data () {
return {
elementValue: 4
}
},
methods: {
elementByValue: function () {
通過事件中心去發(fā)射'Assembly'自己命名的锥余，方法腹纳，this.elementValue為傳的參數(shù)。
Bus.$emit('Assembly', this.elementValue)
}
}
}
</script>
組件B中
<template>
<div>
B組件:
通過$on方法來接受該方法以及傳的參數(shù)
<input type="button" value="點(diǎn)擊觸發(fā)" @click="getData">
<span>{{name}}</span>
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data () {
return {
name: 0
}
},
mounted: function () {
var vm = this
// 用$on事件來接收參數(shù) 并且調(diào)用了在a組件中出發(fā)的方法
Bus.$on('Assembly', (data) => {
console.log(data)
vm.name = data
})
},
methods: {
getData: function () {
this.name++
}
}
}
</script>
這就完成了非父子組件的傳參驱犹，不過小編在學(xué)習(xí)過程中還發(fā)現(xiàn)了另一種方法：真是學(xué)自折騰來啊
不理解的小伙伴可以參考官網(wǎng)的解釋：
第二種：說明一下
由于vue2.0 移除了1.0中的
broadcast 這兩個(gè)組件之間通信傳遞數(shù)據(jù)的方法 ,官方的給出的最簡單的升級(jí)建議是使用集中的事件處理器,
而且也明確說明了 一個(gè)空的vue實(shí)例就可以做到,因?yàn)閂ue 實(shí)例實(shí)現(xiàn)了一個(gè)事件分發(fā)接口.方法就是嘲恍，在vue初始化的時(shí)候給data添加一個(gè) 名字為eventhub 的空vue對象
main.js中
new Vue({
el: '#app',
router,
render: h => h(App),
data: {
eventHub: new Vue()
}
})
好的 這個(gè)時(shí)候 你就可以一勞永逸了，在任何組件都可以調(diào)用事件發(fā)射 接受的方法了.
如何獲取到這個(gè)空的vue對象 eventhub呢.在組件里面直接調(diào)用這個(gè)
某一個(gè)組件內(nèi)調(diào)用事件觸發(fā)
//通過this.$root.eventHub獲取此對象
//調(diào)用$emit 方法
this.$root.eventHub.$emit('YOUR_EVENT_NAME', yourData)
另一個(gè)組件內(nèi)調(diào)用事件接受,當(dāng)然在組件銷毀時(shí)接觸綁定,使用$off方法
mounted(){
this.$root.eventHub.$on('YOUR_EVENT_NAME', (yourData)=>{
console.log(yourData)
})
}
結(jié)束語
總結(jié)一下雄驹，收獲還是蠻大的佃牛，但是不知道是記性不好了，還是老了医舆，寫一段時(shí)間的別的項(xiàng)目就忘掉了吁脱，還是需要重新溫習(xí)一遍，真是應(yīng)了那句古話彬向，好記性不如爛筆頭兼贡。好了不多說了，希望可以幫助到自己和小伙伴們娃胆。
