本文主要解決vue組件之間的通信問題
Prop 向下傳遞厌衙，事件向上傳遞
Prop
（主要用于父組件向子組件下發(fā)數(shù)據(jù)）
- 子組件中顯式地用 props選項聲明它預(yù)期的數(shù)據(jù)：
// 子組件使用數(shù)據(jù)
<a href="/" :class="navActive === 'index' ? 'active' : ''">首頁</a>
// props聲明
export default {
data() { ... },
props: ['navActive', 'isZjrc']
...
}
- 父組件中傳入數(shù)據(jù)
// 傳入靜態(tài)數(shù)據(jù)
<header-nav navActive="index"></header-nav>
// 傳入動態(tài)值
<header-nav :navActive="navClassname"></header-nav>
事件
（主要用于子組件給父組件發(fā)送數(shù)據(jù)）
父子組件通信
- 在子組件中觸發(fā)父組件的事件
<button @click="toParent">傳值</button>
...
export default {
data() { ... },
methods: {
toParent() {
this.$emit('childToParentMsg', '子組件向父組件傳值')
}
}
}
- 在父組件中監(jiān)聽事件
<header-nav navActive="index" @childToParentMsg="showMsg"></header-nav>
<h1>{{childMsg}}</h1>
// 事件綁定
export default {
data() {
return {
childMsg: ''
}
},
components: {
HeaderNav
},
methods: {
showMsg(msg) {
this.childMsg = msg
}
}
}
非父子組件通信
- 在組件A中監(jiān)聽事件
export default {
mounted() {
this.$on("showDialog", id => {
this.showDialog(id);
});
}
}
- 在組件B中觸發(fā)A的事件
<apply-invoice ref="invoiceDialog"></apply-invoice>
export default {
mounted() {
this.$refs["invoiceDialog"].$emit("showDialog",this.customerId);
}
}
