前端笔记(7) Vue3 插槽slot的使用案例

前言

在上一篇博客Vue3 dialog弹窗 父子组件之间传值及方法调用中已经介绍了如何给子组件传递参数，但是如何给子组件传递模板内容呢？这个就需要用到插槽slot了。

首先最基础的一点：插槽是放在子组件上的，相当于子组件有一个坑，父组件可以传模板给子组件，来填这个坑。

• 子组件接收参数，用props
• 子组件接收模板，用slot

slot简单使用

1 创建2个组件：A和B

父组件A.vue：

<template>
  <div class="a-back">
    <p>我是A组件p>
    <B>B>
  div>
template>

<script setup lang="ts">
import B from "@/views/B.vue";
script>

子组件B.vue：

<template>
  <div class="b-back">
    <p>我是B组件p>
    <slot>slot>
  div>
template>

• B组件定义了插槽
• A组件中引用了B组件，但是仅仅是简单的，并没有传入模板给B
• 所以结果页面比较简单，入下图
  

2 A传模板给B

父组件A.vue：

<template>
  <div class="a-back">
    <p>我是A组件p>
    <B>
      <input type="text" value="这是A传给B的模板">
    B>
  div>
template>

<script setup lang="ts">
import B from "@/views/B.vue";
script>

• 在之间添加一些模板，这些模板就会替换B组件中的，并展示出来
  

3 A传组件给B

添加另一个子组件C.vue：

<template>
  <div class="c-back">
    <p>我是C组件p>
  div>
template>

父组件A.vue修改如下：

<template>
  <div class="a-back">
    <p>我是A组件p>
    <B>
      <C>C>
    B>
  div>
template>

<script setup lang="ts">
import B from "@/views/B.vue";
import C from "@/views/C.vue";
script>

• 在之间可以传模板也可以直接是组件，结果如下
  

4 slot默认内容

• 在外部没有提供任何内容的情况下，可以为插槽指定默认内容用于渲染
• 如外部提供了内容，这插槽的默认内容不会渲染

父组件A.vue修改如下：

<template>
  <div class="a-back">
    <p>我是A组件p>
    <B>B>
  div>
template>

<script setup lang="ts">
import B from "@/views/B.vue";
script>

子组件B.vue修改如下：

<template>
  <div class="b-back">
    <p>我是B组件p>
	
    <slot>
      我是B组件的slot默认内容
    slot>
  div>
template>

5 具名插槽

• 具名插槽顾名思义就是给插槽起一个名字，用name属性指定，name可以相同，它们渲染的内容就一样
• 如果没有给slot指定name，这默认为“default”，“default”的slot也可以有多个

创建一个子组件Admin.vue，它有一个"header"和“default”，两个"footer"插槽

<template>
  <div class="back">
    <header>
      <slot name="header">slot>
    header>
    <main>
      
      <slot>slot>
    main>
    <footer>
      <slot name="footer">slot>
    footer>
    <footer>
      <slot name="footer">slot>
    footer>
  div>
template>

父组件A.vue修改如下：

• 父组件中用 v-slot:指定要传个哪一个slot
• v-slot:也可以简写为#

<template>
  <div class="a-back">
    <p>我是A组件p>
    <Admin>
      <template v-slot:header>
        <p>我是headerp>
      template>

      <p>我是main（隐式的默认插槽 ）p>

      <template #footer>
        <p>我是footerp>
      template>
    Admin>
  div>
template>

<script setup lang="ts">
import B from "@/views/B.vue";
import C from "@/views/C.vue";
import Admin from "@/views/Admin.vue";
script>

6 作用域插槽

父组件中的插槽内容是无法访问到子组件中的数据的，然而在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。

<div>
  <slot :text="greetingMessage" :count="1">slot>
div>

<MyComponent v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
MyComponent>

要在插槽中用到子组件的数据，目前我还没有遇到需要这样的场景，它具体的内容可以参考官网文档作用域插槽