vue中三种插槽(默认插槽、具名插槽、作用域插槽)的使用方法

目录

1.插槽(slot)是什么？

2.默认插槽(匿名插槽) 

使用默认插槽最常见的情况：父组件把内容插入到子组件留下的一个插槽中

如果子组件中有多个默认插槽，父组件中插入一个/多个内容会怎样？ 

3.具名插槽 

使用具名插槽的正常情况示例： 

使用具名插槽的时候父组件并未插入任何内容结果会怎样？

​4.作用域插槽

---

1.插槽(slot)是什么？

插槽：简单来说就是在组件的内部留一个或多个空白的位置，可供其他使用它的组件传对应的模板代码进去。插槽让组件复用变的更加灵活了。
在Vue3中，插槽被称为<slot>元素。你可以在组件的模板中使用<slot>元素来声明一个插槽。

2.默认插槽(匿名插槽) 

使用默认插槽最常见的情况：父组件把内容插入到子组件留下的一个插槽中

父组件示例：

// parent.vue

<template>
  <div class="home">
    <son>
    	<p>我是会被插入子组件插槽位置的默认插槽内容</p>
    </son>
  </div>
</template>

<script>
import son from '@/components/son.vue'
export default {
  components: {
    son,
  }
}
</script>

 子组件示例：

// son.vue

<template>
  <div>
  	<h1>子组件</h1>
    <slot></slot>	//这里就是子组件插槽的位置，会被替换为父组件的 <p>我是会...内容</p>
  </div>
</template>

结果示例：

修改主入口文件：

如果子组件中有多个默认插槽，父组件中插入一个/多个内容会怎样？ 

父组件示例：

子组件示例：

结果示例：
子组件中每个默认插槽的位置都会被插入父组件插入的所有内容！！！ 

3.具名插槽 

实际上，我们希望达到的效果是插槽对应的内容插入显示，这个时候我们就可以使用具名插槽：

• 具名插槽：顾名思义就是给插槽起一个名字，<slot> 元素有一个特殊的属性：name；

• 一个不带 name 的插槽slot，会有一个隐含的名字：default；
•  具名插槽在使用时的缩写：实际上，具名插槽在使用时也可以缩写，即v-slot也有缩写，就是把参数之前的所有内容 (即将v-slot:) 替换为字符 # ；
  
  例如：v-slot:header 可以被写为 #header

使用具名插槽的正常情况示例： 

父组件示例：

子组件示例：

 结果示例：

使用具名插槽的时候父组件并未插入任何内容结果会怎样？

父组件示例：

子组件不变，结果示例：
如果父组件并未插入内容，则显示子组件中插槽自身的默认内容，否则父组件插入的插槽内容覆盖子组件中插槽自身的默认内容。

 4.作用域插槽

 父组件示例：

子组件示例：

 结果示例：

这里是使用vue3组合式写的作用域插槽代码，选项式代码后续有空了再补(可能吧......)，如想使用选项式可以自行更改代码变为选项式写法。

附：本文参考文档(作用域插槽有选项式写法)

---