Vue中slot插槽的使用，看这篇你就懂啦

---

vue中的插槽是为了方便父组件调用子组件时，往子组件中传入一些自定义的代码片段或内容。

根据插槽的类型、作用， vue中的插槽基本分为三种：默认插槽，具名插槽和 作用域插槽

---

一 默认插槽

默认插槽就是在子组件中，未命名的插槽。这类插槽，在使用时，子组件中使用 标签定义，在父组件中，会将调用子组件标签内的非 标签内容全部 插入默认插槽。而且在子组件中还可以自定义父组件未传值的显示内容。

代码示例如下：

son.vue 组件中

<template>
  <button type="submit">
	  <slot>
    	  这是son组件中默认显示的内容
  	slot>
	button>
template>

parent.vue 组件中 引用 son 组件

<script setup>
import SubmitButton from './SubmitButton.vue'
script>

<template>
  
  <SubmitButton />
  
  <br/>
  
  
  <SubmitButton>
  		<template>
           我是template标签中的内容
     template>
      我是template标签外的内容
  
  SubmitButton>
template>

最后的显示效果为

---

二 具名插槽

具名插槽是在子组件中 使用name属性给 命名了的插槽，它主要用于按照一定的顺序，给子组件指定位置插入内容。如自定义一个页面的组件，在组件中定义好头部，内容，尾部几块地方，在引用这个组件的时候，就可以使用具名插槽给指定的地方插入内容。

为区分父组件调用的子组件的 那一个具名插槽，通常在父组件中用 插入内容 的方式引用，v-slot的语法糖为# ,因此可以写为