現有3個嵌套組件，A->B，B->C。 現在我么需要在A中對C的props賦值，監聽C的emit事件
A組件與C組件通信，我們有多少種解決方案？
1、我們使用vuex來進行數據管理，依賴于vuex我們可以一次改變，任何一個組件中都能獲取。但是如果多個組件共享狀態比較少，使用vuex過于麻煩和難以維護。element-ui中大量采用此方法。
2、自定義vue bus事件總線，原理類似vuex，使用特別簡單。bus適合碰到組件跨級兄弟組件等無明顯依賴關系的消息傳遞，原生app開發中經常用到，但是缺點是bus破壞了代碼的鏈式調用，大量的濫用將導致邏輯的分散，出現問題后很難定位，降低了代碼可讀性。
3、使用B來做中轉，A傳遞給B，B再給C，這是最容易想到的方案，但是如果嵌套的組件過多，需要傳遞的事件和屬性較多，會導致代碼繁瑣，代碼維護困難。
對于我們這種情況，3種方式都有局限性
在vue2.4中，為了解決該需求，引入了listeners，新增了inheritAttrs選項。我們只需要在B組件中對引入的C組件增加下面兩個屬性即可綁定所有的屬性和事件。
<C v-bind="$attrs" v-on="$listeners"></C>
A組件
<template>
<div>
<h2>組件A 數據項:{{myData}}</h2>
<B @changeMyData="changeMyData" :myData="myData"></B>
</div>
</template>
<script>
import B from "./B";
export default {
data() {
return {
myData: "100"
};
},
components: { B },
methods: {
changeMyData(val) {
this.myData = val;
}
}
};
</script>
B組件
<template>
<div>
<h3>組件B</h3>
<C v-bind="$attrs" v-on="$listeners"></C>
</div>
</template>
<script>
import C from "./C";
export default {
components: { C },
};
</script>
C組件
<template>
<div>
<h5>組件C</h5>
<input v-model="myc" @input="hInput" />
</div>
</template>
<script>
export default {
props: { myData: { String } },
created() {
this.myc = this.myData; // 在組件A中傳遞過來的屬性
console.info(this.$attrs, this.$listeners);
},
methods: {
hInput() {
this.$emit("changeMyData", this.myc); // // 在組件A中傳遞過來的事件
}
}
};
</script>
實際應用
element-ui開發的后臺項目中，大量使用到了el-table和el-pagination做分頁數據展示，所以我封裝一個自定義組件page-table
<template>
<div class="page-table">
<div class="wrapper">
<el-table
ref="elTable"
:data="tableData">
<slot/>
</el-table>
<div style="margin-top: 16px;overflow: hidden">
<el-pagination
class="page"
:current-page="currentPage"
layout="total, prev, pager, next, jumper"
:total="total"
@current-change="handleCurrentChange"/>
</div>
</div>
</div>
</template>
但是這樣做的副作用是引用page-table的地方無法使用el-table和屬性和事件。我們在page-table中把所有el-table的屬性和事件都中轉一遍？有上百個呢。
只需在el-table使用的地方加上v-on="attrs"即可，使用page-table的地方即可使用所有el-table的屬性和事件。
<template>
<div class="page-table">
<div class="wrapper">
<el-table
ref="elTable"
v-bind="$attrs"
v-on="$listeners"
:data="tableData">
<slot/>
</el-table>
<div style="margin-top: 16px;overflow: hidden">
<el-pagination
class="page"
:current-page="currentPage"
layout="total, prev, pager, next, jumper"
:total="total"
@current-change="handleCurrentChange"/>
</div>
</div>
</div>
</template>
我們有時候會碰到有多個兄弟組件需要傳遞參數到最外層，如有B組件包含C1和C2,都需要和A交互，定義2個props使用v-bind即可
<template>
<div class="page-table">
<div class="wrapper">
<el-table
ref="elTable"
v-bind="table1Props"
:data="tableData">
<slot/>
</el-table>
<el-table
ref="elTable"
v-bind="table2Props"
:data="tableData">
<slot/>
</el-table>
<div style="margin-top: 16px;overflow: hidden">
<el-pagination
class="page"
:current-page="currentPage"
layout="total, prev, pager, next, jumper"
:total="total"
@current-change="handleCurrentChange"/>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
table1Props: Object,
table2Props: Object,
}
</script>
