單個插槽
單個插槽是 Vue 的官方叫法,但其實也可以稱為默認插槽或匿名插槽。它不需要設置 name 屬性,并且可以放置在組件的任意位置。正如其名,一個組件中只能有一個該類插槽。相對應的,具名插槽可以有多個,只
單個插槽是 Vue 的官方叫法,但其實也可以稱為默認插槽或匿名插槽。它不需要設置 name 屬性,并且可以放置在組件的任意位置。正如其名,一個組件中只能有一個該類插槽。相對應的,具名插槽可以有多個,只要它們的名字(name 屬性)不同。
下面通過一個例子來展示:
```javascript // 父組件代碼This is the content of the default slot.
在這個例子中,父組件在 `
This is the content of the default slot.
```最終的渲染效果如下:
``` This is the content of the default slot. ```具名插槽
具名插槽可以用于在父組件中定義多個插槽,并在子組件中根據(jù)插槽名進行分發(fā)。下面是一個示例:
```javascript // 父組件代碼This is the header
This is the footer
上述代碼中,父組件定義了兩個具名插槽:header 和 footer。在子組件中,通過 `
最終顯示結果如下圖所示: