slot插槽

vue3中的插槽有普通插槽，具名插槽和作用域插槽

使用方法如下：

父组件中引入子组件

<template>
  <div class="box">
    <Test>
      <!-- 普通插槽填充数据 -->
      <div>hello</div>
      <!-- 具名插槽填充数据a，v-slot指令可以简写为#-->
      <template v-slot:a>
        <div>我是填充的数据a</div>
      </template>
      <!-- 具名插槽填充数据b -->
      <template #b>
        <div>我是填充的数据b</div>
      </template>
    </Test>
  </div>
</template>

<script setup lang="ts">
import Test from "./Test.vue";
</script>

子组件中需要使用插槽的地方使用slot标签

<template>
  <div class="test">
    子组件
    <div>hi</div>
    <!-- 默认插槽 -->
    <slot></slot>
    <div>hi</div>
    <!-- 具名插槽 -->
    <div>111</div>
    <slot name="a"></slot>
    <div>111</div>
    <slot name="b"></slot>
  </div>
</template>

3.作用域插槽：就是可以传递数据的插槽，子组件可以将数据会传给父组件，父组件可以决定这些回传的数据以何种结构或者外观在子组件中去展示

父组件中：（使用v-slot接收）

<template>
  <div class="box">
    <Test1 :list="list">
      <template v-slot="{ $row, $index }">
        <div
          :style="[
            $row.id == 3 ? 'color:green' : '',
            $index == 0 ? 'color:red' : '',
          ]"
        >
          {{ $row }}--{{ $index }}
        </div>
      </template>
    </Test1>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Test1 from "./Test1.vue";

let list = ref([
  { id: 1, title: "数据1" },
  { id: 2, title: "数据2" },
  { id: 3, title: "数据3" },
  { id: 4, title: "数据4" },
]);
</script>

子组件中：（在slot标签中传递数据）

<template>
  <div>
    <div v-for="(item, index) in list" :key="item.id">
      <slot :$row="item" :$index="index"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from "vue";
let props = defineProps(["list"]);
</script>