Vue3之插槽

前言

之前的文章里介绍了vue3中父传子props方法可以传递js中任意类型的数据。那么如何向子组件中传入模版呢，很多时候组件里面需要渲染一些自定义的模块，根据不同的场景显示不同的内容，此时传递模版就更方便，这就要用到slot也就是插槽了。文中的例子也都是使用vue3的语法。

插槽

插槽（slot）是一种非常强大和灵活的机制，用于在组件中传递内容。在组件中通过插槽定义模板，然后在使用的时候填充具体的内容。
在组件中，你可以使用 元素来定义插槽的出口，表示一个可插入内容的位置。在父组件中，可以通过插入内容到这个插槽来填充它。

组件模板：

使用

<script setup>
import SComponent from './SComponent.vue';
</script>

<template>
  <SComponent>
    <p>父组件的内容将插入到子组件的插槽中。</p>
  </SComponent>
</template>

</script>

渲染作用域

插槽中的内容可以访问父组件中的数据和方法。这意味着插槽内容在父组件的作用域内进行渲染，可以使用父组件的数据和方法。
就比如下面的例子里面，这里两个插值表达式渲染的内容是一样的。

<script setup>
import { ref } from 'vue';
import SComponent from './SComponent.vue';
const title = ref("标题");
</script>

<template>
  <div>{{ title }}</div>
  <SComponent>
    <p>{{ title }}</p>
  </SComponent>
</template>

</script>

但是插槽内容无法访问子组件的数据。Vue 模板中的表达式只能访问其定义时所处的作用域，这和 JavaScript 的词法作用域规则是一致的。

默认插槽

很多时候不需要传入内容，默认就显示的模块，叫做默认插槽。注意：一个组件里面只能定义一个默认插槽
比如一个公共组件SubmitButton.vue

<template>
  <botton>
    <slot>
      确定
    </slot>
  </button>
</template>

使用：在没有传入内容时，默认就展示 确定。如果父组件传递了内容就使用传递的。

<SubmitButton />

此时就会显示保存

<SubmitButton>保存</SubmitButton>

具名插槽

有时候一个组件里面需要多个插槽，为了确定渲染的内容不出错，就需要给占位的槽位取个名字，使用时根据名字就能分别渲染出来具体的内容了。

比如：SlotComponent.vue

<template>
  <div>
    <h1>组件</h1>
    // 具名插槽
    <slot name="header"></slot>
    // 默认插槽
    <slot></slot>
  </div>
</template>

使用：需要通过v-slot指令给插槽传递内容，v-slot 有对应的简写 #，下面的