渲染作用域

插槽内容无法访问子组件的数据.(可以使用作用域插槽) 父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。

默认内容

如果我们想在父组件没有提供任何插槽内容时渲染默认内容，只需要将默认内容写在 <slot> 标签之间即可：

<button type="submit"> 
    <slot> Submit <!-- 默认内容 --> </slot> 
</button>

具名插槽

<slot> 元素可以有一个特殊的 attribute name，用来给各个插槽分配唯一的 ID，以确定每一处要渲染的内容这类带 name 的插槽被称为具名插槽 (named slots)。没有提供 name 的 <slot> 出口会隐式地命名为default。组件内定义:

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <!-- 默认是default --> 
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

<BaseLayout>
    <!-- <template v-slot:header> --> 
    <!-- 缩写 --> 
    <template #header>
        <!-- header 插槽的内容放这里 --> 
    </template> 
</BaseLayout>

动态插槽名

<base-layout>
    <template v-slot:[dynamicSlotName]> ... </template>

    <!-- 缩写为 -->
    <template #[dynamicSlotName]> ... </template>
  </base-layout>

作用域插槽

然而在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。

我们也确实有办法这么做！可以像对组件传递 props 那样，向一个插槽的出口上传递 attributes：

<!-- <MyComponent> 的模板 -->
<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>
<!-- 父组件 -->
<MyComponent v-slot="slotProps"> 
{{ slotProps.text }} {{ slotProps.count }} </MyComponent>

具名作用域插槽

<slot name="header" message="hello"></slot>

<MyComponent>
 <template #header="headerProps">
   {{ headerProps }}
 </template>

 <template #default="defaultProps">
   {{ defaultProps }}
 </template>

 <template #footer="footerProps">
   {{ footerProps }}
 </template>
</MyComponent>

Vue学习笔记-插槽 Slots