Vue 實現 slot 多層巢狀

2021-08-28 06:08:01 字數 846 閱讀 2197

在引用一些框架時,通常他們自己就已經有插槽,但有時需要對插槽進行拓展

在基礎元件中引入了 mint-ui 的mt-header元件

並通過其提供的具名插槽向元件右側插入內容

但該元件是我們自定義的,我們並不知道元件被呼叫時會被插入什麼內容

所以在該元件中插入該具名插槽的內容也是乙個插槽

關鍵點在於這個插入的未知內容的插槽也必須是具名的

="logo" src=

"./images/logo.png" alt=

"logo" slot=

"left"

>

"button" slot=

"right"

>

<

/slot>

<

/mt-header>

<

/template>

在引入元件時,只需要將待插入的內容插槽名稱與基礎元件中覆寫的插槽名稱對應即可

="portal-panel"

>

<

in-header>

="btn-group" slot=

"button"

>

登入<

/mt-button>

註冊<

/mt-button>

<

/div>

-header>

<

/div>

<

/template>

Vue 實現 slot 多層巢狀

在引用一些框架時,通常他們自己就已經有插槽,但有時需要對插槽進行拓展 在基礎元件中引入了 mint ui 的mt header元件 並通過其提供的具名插槽向元件右側插入內容 但該元件是我們自定義的,我們並不知道元件被呼叫時會被插入什麼內容 所以在該元件中插入該具名插槽的內容也是乙個插槽 關鍵點在於這...

VUE多層路由巢狀

例如 在做系統時,主頁面有兩個功能 home and news 在 home 下又分為登入和註冊。首先需要將各種模板進行抽離。定義模板 id home home模板,裡面含子視口 to home login 登入router link to home zhuce 註冊router link rout...

多重 多層 巢狀迴圈

乙個迴圈結構中可以巢狀其他兩種迴圈結構,巢狀多少層和多少個都可以,一般不會超過兩層!所以多重迴圈又往往被稱為叫雙重迴圈。外層迴圈執行一次,內層迴圈執行一遍 輪。while dowhile 如果在列印圖形的時候,先看有幾行,外層迴圈控制列印幾行。再看有幾列,內層迴圈控制每列列印的內容。一會break和...