[TOC] ## Vue 實現 slot 多層嵌套 在引用一些框架時，通常他們自己就已經有插槽，但有時需要對插槽進行拓展 ### 定義基礎組件，向插槽中再插入一個插槽 - 在基礎組件中引入了 Mint-UI 的 mt-header 組件 - 并通過其提供的具名插槽向組件右側插入內容 - 但該組件是我們自定義的，我們并不知道組件被調用時會被插入什么內容 - 所以在該組件中插入該具名插槽的內容也是一個插槽 - 關鍵點在于這個插入的未知內容的插槽也必須是具名的 ~~~ <template> <mt-header> <img class="logo" src="./images/logo.png" alt="logo" slot="left"> <slot name="button" slot="right"></slot> </mt-header> </template> ~~~ 子組件引用基礎組件，像二級插槽中插入具體內容，并指定二級插槽的名稱 在引入組件時，只需要將待插入的內容插槽名稱與基礎組件中覆寫的插槽名稱對應即可 ~~~ <template> <div class="portal-panel"> <in-header> <div class="btn-group" slot="button"> <mt-button>登錄</mt-button> <mt-button>注冊</mt-button> </div> </in-header> </div> </template> ~~~ ### 參數傳遞 ~~~ <Table size="small" :loading="loading" stripe border :columns="columns" :data="tableData" class="tableStyle" @on-row-click="progectDetails" @on-selection-change="selectedChange"> <!-- 自定義列 --> <!-- <div slot="action" slot-scope="{ row, index }"> <slot name="setRow" :row="row" :index="index"></slot> </div> --> <slot name="setRow" slot="action" slot-scope="{ row, index }" :row="row" :index="index"></slot> </Table> ~~~ ### 使用 ~~~ <ErsTable :columns="columns" :tableData="tableData" :operateData="isSearch? search:operate" @handle-click-item="handleClickItem" @progect-details="progectDetails" @change-page="changePage"> <template slot="setRow" slot-scope="{ row, index }"> <!-- <template slot="action" slot-scope="{ row, index }"> --> <div @click.stop="onSee( row, index )"> <ErsIcon name="see" /> 查看 </div> <!-- </template> --> </template> </ErsTable> ~~~