1.父組件傳遞數據給子組件
父組件數據如何傳遞給子組件呢？可以通過props屬性來實現
父組件：
<parent>
<child :child-msg="msg"></child>//最好用 - 代替駝峯，不區分大小寫
</parent>
data(){
return {
msg: [1,2,3]
};
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
子組件通過props來接收數據:
方式1：
props: ['childMsg']- 1
- 1
方式2 :
props: {
childMsg: Array //這樣可以指定傳入的類型，如果類型不對，會警告
}
- 1
- 2
- 3
- 1
- 2
- 3
方式3：
props: {
childMsg: {
type: Array,
default: [0,0,0] //這樣可以指定默認的值
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
這樣呢，就實現了父組件向子組件傳遞數據.
2.子組件與父組件通信
那麼，如果子組件想要改變數據呢？這在vue中是不允許的，因爲vue只允許單向數據傳遞，這時候我們可以通過觸發事件來通知父組件改變數據，從而達到改變子組件數據的目的.
子組件:
<template>
<div @click="up"></div>
</template>
methods: {
this.$emit('upup','hehe'); //主動觸發upup方法，'hehe'爲向父組件傳遞的數據
up() {
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
父組件:
<div>
<child @upup="change" :msg="msg"></child> //監聽子組件觸發的upup事件,然後調用change方法
</div>
methods: {
change(msg) {
this.msg = msg;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
3.非父子組件通信
如果2個組件不是父子組件那麼如何通信呢？這時可以通過eventHub來實現通信.
所謂eventHub就是創建一個事件中心，相當於中轉站，可以用它來傳遞事件和接收事件.
let Hub = new Vue(); //創建事件中心- 1
- 1
組件A觸發：
<div @click="eve"></div>
methods: {
eve() {
Hub.$emit('change','hehe');// 觸發組件 A 中的事件
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
組件B接收:
<div></div>
created() {
Hub.$on('change', () => { // 在組件 B 創建的鉤子中監聽事件
this.msg = 'hehe';
});
}
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
這樣就實現了非父子組件之間的通信了.原理就是把Hub當作一箇中轉站！
原文鏈接：http://blog.csdn.net/mr_fzz/article/details/54636833