Vue3 插槽全家桶

匿名插槽

// 子组件
<template>
  <div>
    <header>
      <!-- 匿名插槽 -->
      <slot></slot>
    </header>
  </div>
</template>
----------------------------------------------------------------
// 父组件
<nSlot>
    <!-- 使用匿名插槽 -->
    <template v-slot>
      <div>我是匿名插槽</div>
    </template>
</nSlot>
-----------------------------------------------------------------
import nSlot from './components/插槽全家桶/匿名和具名插槽.vue'

匿名插槽没有简写

具名插槽

// 子组件 
<main>
   <!-- 具名插槽 -->
   <slot name="center"></slot>
</main>
---------------------------------------------------------------------
// 父组件
 <nSlot>
    <!-- 使用具名插槽 -->
    <template #center>
      <div>我是具名插槽</div>
    </template>
 </nSlot>
--------------------------------------------------------------------
import nSlot from './components/插槽全家桶/匿名和具名插槽.vue'

具名插槽简写为：#xxx

作用域插槽

// 子组件
<template>
  <div>
    <main>
      <!-- 将数据传到app.vue -->
      <div v-for="(item,index) in data">
         // 有点类似父传子props
        <slot :index="index" :slotData="item"></slot>
      </div>
    </main>
  </div>
</template>
--------------------------------------------------------------------
<script setup lang='ts'>
import { reactive } from "vue";
// 数据类型
type names = {
  name: string;
  age: number;
};
// 定义数据
const data = reactive<names[]>([
  {
    name: "钢铁侠",
    age: 21,
  },
  {
    name: "金刚狼",
    age: 16,
  },
  {
    name: "鹰眼",
    age: 55,
  },
  
]);
</script>
----------------------------------------------------------------------------
// 父组件
 <zSlot>
    <!-- 父组件接收数据 -->
    <!-- 名字要跟子组件传过来的对得上 -->
    <template #default="{slotData , index}">
      <div>{{ slotData.name }} --> {{ slotData.age }} --> {{ index }}</div>
    </template>
 </zSlot>
-----------------------------------------------------------------------------
import zSlot from './components/插槽全家桶/作用域插槽.vue'

作用域插槽的简写为：#defalut=“{xxx，xxx，…}”

动态插槽

  <nSlot>
    <!-- 可以动态决定要使用哪个子组件的插槽 -->
    <template #[name]>
      <div>我在哪儿</div>
    </template>
  </nSlot>
---------------------------------------------------------
// 动态插槽
// 可以根据需求动态插入
// let name = ref('default')  // defalut填充到匿名插槽的位置
// let name = ref('center')  // 填充到名字为center的插槽