19. 插槽slot（1）

我们已经了解到组件能够接收任意类型的JavaScript值作为props，但组件要如何接收模板内容呢？

在某些场景中，我们可能想要为子组件传递一些模板片段让子组件在它们的组件中渲染这些片段

什么是插槽？

插槽是 Vue 中组件内容分发的机制，允许你在父组件中向子组件传递任意 HTML 内容。

示例代码解析

子组件：SlotsBase.vue

<template>
  <h3>插槽基础知识</h3>
  <slot></slot> <!-- 插槽出口 -->
</template>

• <slot></slot> 是一个插槽出口，表示在使用该组件时可以插入自定义内容。
• 在这个例子中，我们定义了一个标题 “插槽基础知识”，下方是一个默认插槽。

父组件：App.vue

<template>
  <SlotsBase>
    <div>
      <h3>插槽标题</h3>
      <p>插槽内容</p>
    </div>
  </SlotsBase>
</template>

<script>
import SlotsBase from "@/components/SlotsBase.vue";

export default {
  components: {
    SlotsBase
  }
};
</script>

• 我们在 App.vue中引入并使用了 SlotsBase 组件。
• 使用方式 <SlotsBase>...</SlotsBase> 标签之间的内容会替换掉子组件中的 <slot></slot>。
• 
  

总结

1. 子组件通过 <slot></slot> 定义插槽入口。
2. 父组件在使用子组件时，在其标签内部写入内容即可传入插槽。
3. 插槽内容支持任何 HTML 元素和结构。

<slot>元素是一个插槽出口(slotoutlet)，标示了父元素提供的插槽内容(slotcontent)将在哪里被渲染