vue3 slot插槽

学习参考的文章https://zhuanlan.zhihu.com/p/529152853?utm_id=0

插槽基本使用

子组件
<template>
  <div class="child-box">
    <p>我是子组件</p>
    <!-- 插槽 -->
    <slot></slot>
  </div>
</template>



父组件
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <child>
    <div>小猪课堂</div>
  </child>
</template>

插槽默认内容

<template>
  <div class="child-box">
    <p>我是子组件</p>
    <!-- 插槽 -->
    <slot>
      <p>我是默认内容</p>
    </slot>
  </div>
</template>




引用但不传递参数
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <child></child>
</template>




传递参数
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <child>
    <div>{{ message }}</div>
  </child>
</template>


<script setup lang="ts">
import { ref } from "vue";
import Child from "./child.vue";
const message = ref("小猪课堂");
</script>

当slot标签中拥有内容时，这些内容就是插槽默认内容。

具名插槽

目的：区分插槽与内容的对应关系

子组件
<template>
  <div class="child-box">
    <p>我是子组件</p>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>



父组件
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <child>
    <template v-slot:header>
      <div>我是 header：{{ message }}</div>
    </template>
    <div>我没有名字：{{ message }}</div>
    <template v-slot:footer>
      <div>我是 footer：{{ message }}</div>
    </template>
  </child>
</template>

效果展示

默认插槽与具名插槽共用

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <child>
    <template v-slot:header>
      <div>我是 header：{{ message }}</div>
    </template>
    <div>我没有名字：{{ message }}</div>
    <div>我没有名字：{{ message }}</div>
    <div>我没有名字：{{ message }}</div>
    <template v-slot:footer>
      <div>我是 footer：{{ message }}</div>
    </template>
  </child>
</template>

效果展示

注意事项：

• 我们通过v-slot:header 指令的形式找到对应的插槽。
• 需要注意的是该指令需要作用在 template 元素上。

动态插槽

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
  <!-- 缩写为 -->
  <template #[dynamicSlotName]>
    ...
  </template>
</base-layout>

插槽作用域

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <child>
    <div>{{ message }}</div>
  </child>
</template>


<script setup lang="ts">
import { ref } from "vue";
import Child from "./child.vue";
const message = ref("小猪课堂");
</script>

• 插槽内容可以访问到父组件的数据作用域。
• 插槽内容无法访问到子组件的数据。

默认插槽作用域传参

子组件
<template>
  <div class="child-box">
    <p>我是子组件</p>
    <slot text="我是子组件小猪课堂" :count="1"></slot>
  </div>
</template>



父组件
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <child v-slot="slotProps">
    <div>{{ slotProps.text }}---{{ slotProps.count }}</div>
  </child>
</template>




父组件【解构写法】
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <child v-slot="{ text, count }">
    <div>{{ text }}---{{ count }}</div>
  </child>
</template>

效果展示

具名插槽作用域传参

子组件
<template>
  <div class="child-box">
    <p>我是子组件</p>
    <slot name="header" text="我是子组件小猪课堂" :count="1"></slot>
  </div>
</template>



父组件
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <child>
    <template #header="{ text, count }">
      <div>{{ text }}---{{ count }}</div>
    </template>
  </child>
</template>

简写

<template v-slot:footer></template>
可简写为：
<template #footer></template>