🦖欢迎观阅本本篇文章，我是Sam9029

插槽（Slot）的理解

官网原文：
<slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。

说白了就是有两个角色

一个是父，一个是子

子在自身内部留个位置，父来提供那个位置中的展示内容

插槽（Slot）的使用

语法

<slot></slot>

示例

父组件

• 引入

<template>
    <ChildVue>
        // img 插入的位置就是 ChildVue 中 <slot></slot> 的位置
      <img src="@/img/ikun0.jpg" alt="">
    </ChildVue>
</template>

<script setup>
import ChildVue from "@/views/ChildVue.vue";
</script>

子组件

• 设置插槽

//ChildVue.vue
<template>
    <div>
    	<slot></slot>
    </div>
</template>

⭐注意 slot 标签可以提供默认内容

（若没有在父组件设置插槽内容时，默认内容则会显示）

反之，则显示父组件提供的插槽内容

<slot>默认内容</slot>

实操一下：Slot — Vue SFC Playground (vuejs.org)

具名插槽（Slot）的使用

具名插槽理解

有时在一个组件中包含多个插槽时，我们可以给它取个名字name

这样我们在父组件使用时，就可以根据它们的名字来找到对应的插槽位置，并插入对应内容

这样就可以在多个插槽的同时使用时，避免混乱，这很有用

具名插槽的使用

因为父组件有些使用注意，先让我们来看看语法更简单的子组件的用法

子组件

<div class="container">
    <slot name="header"></slot>
    //当然，如果你比较任性，也可以这样留一个 唯一的插槽 不给它名字
    <slot></slot>
    <slot name="footer"></slot>
</div>

父组件

• 注意（Attention!）具名插槽在父组件使用上有些要注意的地方，放心，它们不多也不难，只是要多用几次即可掌握
• 注意一： 我们无法在使用引入子组件后之后直接在它的身体写内容，记住，要包裹一层<template></template>
  • 为什么？因为我们需要找到在子组件中对应的插槽，你可以理解为template标签在自己身上提供了方法
  • 他就是v-slot:，当然它是个在Vue中它是宝贝，所以你可以使用它的小名# (语法糖)

<ChildVue>
  <!--是 v-slot:header 不是 v-slot="header"-->
  <template v-slot:header>
    <!-- header 插槽的内容放这里 -->
  </template>
    
 <!-- 让我们试一试叫他 # 它也会生效的 -->
  <template #footer>
    <!-- footer 插槽的内容放这里 -->
  </template>
   
  <!--如果你对这里的两个 p 标签有疑惑,恭喜你,上面的内容理解的不错👍-->
  <!--想知道原因,继续往下看 注意二 吧-->
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
    
</ChildVue>

<script setup>
import ChildVue from "@/views/ChildVue.vue";
</script>

• **注意二：**还记得，使用具名插槽时我们无法在子组件中直接写内容嘛，不好意思的是，在某些条件下，这种做法是可以的。我承认我不够严谨，但不妨接着看下去，你就会明白为什么我说话一点也不直肠子
  • 想想,某些条件是什么?
  • 若你没有思路,回去子组件的代码看看有这么一行话 //当然，如果你比较任性，也可以这样留一个 唯一的插槽 不给它名字
  • 好了,答案就在下面,先别看,想一想

我在父组件里面写入的未使用template包裹的两个 p 标签 会自动插入到 子组件里 唯一未命名的的插槽中 即<slot></slot>

如果你想对,恭喜你!🎉🎉

实操一下：具名插槽-Vue SFC Playground (vuejs.org)

以上就是关于插槽基础使用

若你对基础使用没有问题了,下面的内容是关于插槽更进一步的使用,你可以在插槽 Slots | Vue.js (vuejs.org)访问官方文档,同时重温基础使用

动态插槽名

作用域插槽

🦖欢迎查阅Sam9029 的其他文章

🐸【Vue3-响应式工具API】ref 和 reactive 使用_Sam9029的博客-CSDN博客

🐸(Aixos的引入与基本使用_Sam9029的博客-CSDN博客

🐸【JS-工具类】懒加载的实现 – 两种方式 — 一种5行JS实现懒加载_Sam9029的博客-CSDN博客

**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求赞，求收藏，求评论不过分吧**