Vue3 Slot—插槽全家桶使用詳解

插槽是什麼

插槽 slot 就是子組件中提供給父組件使用的一個佔位符，用 <slot></slot> 表示，父組件可以給這個佔位符內填充任何模板代碼，填充的內容會自動替換 <slot></slot> 標籤。

插槽被分爲三種：匿名插槽、具名插槽、作用域插槽。

1、匿名插槽

沒有名字的插槽就是匿名插槽，組件可以放置一個或多個 <slot></slot>。

子組件內放置一個插槽：

<template>
    <div>
       <slot></slot>
    </div>
</template>

父組件使用插槽：

<Header>
 <div>哈哈哈哈哈哈</div>
</Header>

// 或
<Header>
 <template v-slot>
  哈哈哈哈哈哈
 </template>
</Header>

如果有多個 slot 時，父組件中需要填充的內容就會被多次插入。

2、具名插槽

組件內可以放置多個插槽，如果都是匿名插槽的時候，渲染的都是父組件默認內容，無法實現插入多個不同內容，此時就需要給插槽設置名字以便於區分它們。

具名插槽就是給插槽取個名字，可以把組件內多個插槽放在不同的地方，父級填充內容時，可以根據名字把內容填充到對應的插槽內。

定義爲多個插槽的組件：

<template>
  <div>
    頭部：
    <slot name="header"></slot>
    主體：
    <slot></slot>
    底部：
    <slot name="footer"></slot>
  </div>
</template>

父組件填充內容需要對象插槽名：

<Com>
  <template v-slot:header>
    <div>我是header</div>
  </template>
  <template v-slot>
    <div>中間匿名插槽</div>
  </template>
  <template v-slot:footer>
    <div>我是 footer</div>
  </template>
</Com>

可以簡寫爲：

<Com>
  <template #header>
    <div>我是header</div>
  </template>
  <template #default>
      <div>中間匿名插槽</div>
  </template>
  <template #footer>
    <div>我是 footer</div>
  </template>
</Com>

3、作用域插槽

匿名插槽和具名插槽父組件只能訪問父組件中編譯的內容，子組件只能訪問子組件內的內容，有時我們在父組件需要訪問到子組件中的內容，此時 vue 給我們提供了作用域插槽。

作用域插槽子組件內定義要傳送的數據：

<template>
  <div v-for="item in 10" :key="item">
    <slot :data="item" name="list"></slot>
  </div>
</template>

在調用組件的父組件內接收數據：

<SlotCom>
  <template #list="{data}">
    {{ data }}
  </template>
</SlotCom>

4、動態插槽

有多個插槽，不同狀態下展示不同的插槽，此時我們就可以使用動態插槽，插槽名是一個變量名，其值可以是動態修改的。

<Dialog>
  <template #[name]>
    <div>
    動態插槽
    </div>
</template>
</Dialog>

我們可以做一個類似於選項卡的效果：

父組件代碼：

<button v-for="item in slotList" :key="item.name" @click="changeSlot(item)">
  {{ item.content }}
</button>
<childCom>
  <template #[name]>
    <div>我是{{ name }}插槽</div>
  </template>
</childCom>
<script>
import { reactive, ref } from 'vue'
let name: string = ref('header')

type Slots = {
  name: string
  content: string
}
const slotList = reactive<Slots[]>([
  { name: 'header', content: '頭' },
  { name: 'body', content: '中間' },
  { name: 'footer', content: '尾' },
])
const changeSlot = (item: Slots): void => {
  name.value = item.name
}
</script>

子組件代碼：

<template>
  <div>
    <slot name="header"></slot>
    <slot name="body"></slot>
    <slot name="footer"></slot>
  </div>
</template>

此時就可以動態地選擇其中任意一個插槽展示。

 

 

 

 

 

 

 from: https://www.51cto.com/article/714092.html