Vue3：插槽v-slot

几种插槽

• 匿名插槽
• 具名插槽
• 作用域插槽
• 动态插槽

v-slot的简写方式

<template v-slot></template>

<========匿名插槽-简写==========>

<template #default></template>




<template v-slot:title></template>

<========具名插槽-简写==========>

<template #title></template>

匿名插槽 和 具名插槽

父组件：

<template>
  <Dialog>
    <template #header>
      <div>
        父组件提供的标题
      </div>
    </template>
    <template #default>
      <div>
        父组件提供的内容
      </div>
    </template>
    <template #footer>
      <div>
        父组件提供的底部
      </div>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import Dialog from './dialog.vue'
</script>

子组件：

<template>
  <header class="header">
    <!-- 具名插槽 -->
    <slot name="header"></slot>
  </header>
  <main class="main">
    <!-- 匿名插槽 -->
    <slot></slot>
  </main>
  <footer class="footer">
    <slot name="footer"></slot>
  </footer>
</template>
<script setup lang="ts">
</script>
<style lang="less" scoped>
.header{
  height: 50px;
  border-bottom: 1px solid rgb(54, 76, 206);
}
.main{
  height: calc(100% - 100px);
  border-bottom: 1px solid rgb(54, 76, 206);
  background-color: aqua;
}
.footer{
  height: 50px;
  border-bottom: 1px solid rgb(54, 76, 206);
  background-color: bisque;
}
</style>

作用域插槽

父组件：

<template>
  <Dialog>
    <template #header>
      <div>
        父组件提供的标题
      </div>
    </template>
    <!-- 作用域插槽 -->
    <template #default="{ data }">
      <div v-for="(item, index) in data" :key="index">
        来自子组件的数据---{{ item }}
      </div>
    </template>
    <template #footer>
      <div>
        父组件提供的底部
      </div>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import Dialog from './dialog.vue'
</script>

子组件：

<template>
  <header class="header">
    <!-- 具名插槽 -->
    <slot name="header"></slot>
  </header>
  <main class="main">
    <!-- 作用域插槽 -->
    <slot :data="data"></slot>
  </main>
  <footer class="footer">
    <slot name="footer"></slot>
  </footer>
</template>
<script setup lang="ts">

import { reactive } from 'vue';
const data = reactive<string[]>(['张三', '王五', '小明', '丽丽', '赵麻子'])

</script>

动态插槽

父组件：

<template>
  <Dialog>
    <!-- 动态插槽 -->
    <template #[slotName]>
      <div>
        <span class="location" @click="changLocation(item)" v-for="item in locationOptions" :key="item.EName">
          {{ item.CName }}
        </span>
        我展示在哪里？
      </div>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { reactive, ref, Ref } from 'vue';
import Dialog from './dialog.vue'
let slotName: Ref<string> = ref('footer')
type locationOptionsType = {
  CName: string,
  EName: string
}
const locationOptions = reactive<locationOptionsType[]>([
  {
    CName: '头部',
    EName: 'header'
  },
  {
    CName: '内容区',
    EName: 'default'
  },
  {
    CName: '底部',
    EName: 'footer'
  },
])
const changLocation = (item: locationOptionsType) => {
  slotName.value = item.EName;
}
</script>
<style scoped lang="less">
.location{
  width: 100px;
  display: inline-block;
  background-color: #ccc;
  border: 1px solid red;
}
</style>

子组件：同作用域插槽代码一致

效果图：

总结

和vue2中插槽的使用基本没有差别~~~