猿创征文｜【Vue3】插槽（Slot）基础使用

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

---

插槽（Slot）的理解

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

说白了就是有两个角色

一个是父，一个是子

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

---

插槽（Slot）的使用

语法

<slot>slot>
1

示例

父组件

• 引入

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

<script setup>
import ChildVue from "@/views/ChildVue.vue";
script>
1
2
3
4
5
6
7
8
9
10

子组件 ChildVue

• 设置插槽

//ChildVue.vue
<template>
    <div>
    	<slot>slot>
    div>
template>
1
2
3
4
5
6

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

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

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

默认内容

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

---

具名插槽（Slot）的使用

具名插槽理解

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

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

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

具名插槽的使用

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

子组件 ChildVue

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

父组件

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

<ChildVue>
  
  <template v-slot:header>
    
  template>
    
 
  <template #footer>
    
  template>
   
  
  
  <p>A paragraph for the main content.p>
  <p>And another one.p>
    
ChildVue>

<script setup>
import ChildVue from "@/views/ChildVue.vue";
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

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

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

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

---

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

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

---

动态插槽名

并不难理解，动态插槽名 的使用，即 将 字符串形式的 插槽名 换成 变量的形式，当然使用的场合实在 父组件 上

依然使用该子组件作为模板

子组件 ChildVue

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

父组件

比如 你要 使用两次 子组件，一次使用 header ，一次使用footer

<teamplate>
	<ChildVue v-for='i in list'>
		<template #[i.dynamicSlotName]>
			{{我是 dynamicSlotName}}
		template>
	ChildVue>
teamplate>

<srcipt>
export default {
	data(){
		return {
			list:[{dynamicSlotName:'header'},{dynamicSlotName:'footer'}]
		}
	}
}
srcipt>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

作用域插槽

关于 作用域 插槽 ，从逻辑上来说，是不好去理解的
最好使用 一些 场景 来 辅助我们 进行 学习

还是建议先阅览官方文档的说明----作用域插槽

---

🦖欢迎查阅Sam9029 的其他文章

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

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

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

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