插槽（Slot）基础使用

插槽（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)访问官方文档,同时重温基础使用

动态插槽名

作用域插槽