vue3 组合式API：插槽

一、内容与出口

1、<slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。插槽内容可以是任意合法的模板内容，不局限于文本，可以是多个元素，甚至是组件

// 插槽内容可以是多个元素，也可以是组件
<FancyButton>
  <span style="color:red">Click me!</span>
  <AwesomeIcon name="plus" />
</FancyButton>

<FancyButton>
  Click me! <!-- 插槽内容 -->
</FancyButton>



// <FancyButton> 模板
<button class="fancy-btn">
  <slot></slot> <!-- 插槽出口 -->
</button>



// 最终渲染出的 DOM 是这样：
<button class="fancy-btn">Click me!</button>

二、渲染作用域

1、插槽内容可以访问到父组件的数据作用域，因为插槽内容本身就是在父组件模板中定义的

//两个 {{ message }} 插值表达式渲染的内容都是一样的
<span>{{ message }}</span>
<FancyButton>{{ message }}</FancyButton>

2、插槽内容无法访问子组件的数据。Vue 模板中的表达式只能访问其定义时所处的作用域，换言之：父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。

三、默认内容：在外部没有提供内容的情况下，可以为插槽指定默认内容。

//例如：<SubmitButton> 组件

<button type="submit">
  <slot></slot>
</button>

//如果想在父组件没有提供插槽内容时，在<button>内渲染 “Submit” ，只需将 “Submit”放在<solt>
//标签之间，来作为默认内容


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


上述案例就可以在父组件中没有提供内容时 <SubmitButton /> 被渲染成 
<button type="submit">Submit</button>


//但是如果提供了内容Save，那么显示提供的内容就会取代默认内容
<SubmitButton>Save</SubmitButton>
//渲染成：
<button type="submit">Submit</button>

四、具名插槽

场景：在父组件中使用的子组件中有多个插槽出口时，为了将内容精准的注入子组件的插槽出口时，此时就需要用到具名插槽了

1、如果一个组件中有多插槽，那么给各个插槽配唯一的ID就成了必要（内容精准的传入到各自目标插槽），<slot>元素有个特殊的attribute name，这类带 `name` 的插槽被称为具名插槽，没有提供name的 <slot> 出口会隐式的命名为default。

例如：<BaseLayout>组件
<div class="container">
  <header>
    <!-- 标题内容放这里 -->
  </header>
  <main>
    <!-- 主要内容放这里 -->
  </main>
  <footer>
    <!-- 底部内容放这里 -->
  </footer>
</div>


//改为具名插槽后
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>

  <main>
    <slot></slot>
  </main>

  <footer>
    <slot name="header"></slot>
  </footer>
</div>

2、为具名插槽传入内容，需要使用一个含有v-slot指令的<template>的元素，并将目标插槽的名字传给v-slot指令 ( v-slot 可简写为 # )

//例如2
<BaseLayout>
    <template v-slot:header></template>
</BaseLayout>

//简写
<BaseLayout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  //带 name 叫具名插槽，没有提供name的 <slot> 出口会隐式的命名为default。
  <template #default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</BaseLayout>

3、如果一个组件中同时接收默认、具名插槽时，所有位于顶级的非 <template> 节点都被 “隐式” 视为默认插槽的内容（所以就可以省略<template #default>这个标签）

<BaseLayout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <template #default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</BaseLayout>




<BaseLayout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <!-- 隐式的默认插槽：位于顶级的非 <template> 节点都被隐式地视为默认插槽的内容 -->
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</BaseLayout>

上述被渲染为

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

五、条件插槽：有时候根据内容是否被传入了插槽来渲染某些内容，可以使用 $slots 属性结合 v-if 来实现

<template>
  <div class="card">
    <div v-if="$slots.header" class="card-header">
      <slot name="header" />
    </div>
    
    <div v-if="$slots.default" class="card-content">
      <slot />
    </div>
    
    <div v-if="$slots.footer" class="card-footer">
      <slot name="footer" />
    </div>
  </div>
</template>

六、动态插槽名：动态指令参数在 `v-slot` 上也是有效的，即可以定义下面这样的动态插槽名

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

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

七、作用域插槽名：插槽的内容无法访问到子组件的状态，某些场景下插槽的内容可能想要同时使用父组件、子组件域内的数据，这是需要让子组件在渲染时将一部分数据提供给插槽（可以像对组件传递 props 那样，向一个插槽的出口上传递 attributes）

1、默认插槽：子组件传入插槽的 props 作为了 `v-slot` 指令的值，可以在插槽内的表达式中访问。

//<MyComponent> 模板

<div>
    <slot :text="greetingMessage" :count="1"></slot>
</div>

//默认插槽如何接受 props
<MyComponent v-slot="soltProps">
    {{soltProps.text}} {{soltProps.count}}
</MyComponent>


// v-slot="slotProps" 可以类比这里的函数(具体函数参考插槽-作用域插槽)签名，和函数的参数类似
//，我们也可以在 v-slot 中使用解构

<MyComponent v-slot="{ text, count }">
  {{ text }} {{ count }}
</MyComponent>

2、具名作用域：工作方式也是类似的，插槽 props 可以作为 `v-slot` 指令的值被访问到：`v-slot:name="slotProps"`

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

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

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

//向具名插槽中传入 props：
<slot name="header" message="hello"></slot>

//注意插槽上的 name 是一个 Vue 特别保留的 attribute，不会作为 props 传递给插槽。因此最终 //headerProps 的结果是 { message: 'hello' }。

3、同时使用了具名插槽与默认插槽，则需要为默认插槽使用显式的 `<template>` 标签。尝试直接为组件添加 `v-slot` 指令将导致编译错误。这是为了避免因默认插槽的 props 的作用域而困惑

<!-- <MyComponent> template -->
<div>
  <slot :message="hello"></slot>
  <slot name="footer" />
</div>


//无法使用的错误示范
<!-- 该模板无法编译 -->
<MyComponent v-slot="{ message }">
  <p>{{ message }}</p>
  <template #footer>
    <!-- message 属于默认插槽，此处不可用 -->
    <p>{{ message }}</p>
  </template>
</MyComponent>


//正确的
<MyComponent>
  <!-- 使用显式的默认插槽 -->
  <template #default="{ message }">
    <p>{{ message }}</p>
  </template>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</MyComponent>

4、高级列表组件示例

场景：渲染一个列表，并同时会封装一些加载远端数据的逻辑、使用数据进行列表渲染、或者是像分页或无限滚动这样更进阶的功能。然而我们希望它能够保留足够的灵活性，将对单个列表元素内容和样式的控制权留给使用它的父组件

<FancyList :api-url="url" :per-page="10">
  <template #item="{ body, username, likes }">
    <div class="item">
      <p>{{ body }}</p>
      <p>by {{ username }} | {{ likes }} likes</p>
    </div>
  </template>
</FancyList>


//在 <FancyList> 之中，我们可以多次渲染 <slot> 并每次都提供不同的数据 (注意我们这里使用了 v-bind 来传递插槽的 props)：
<ul>
  <li v-for="item in items">
    <slot name="item" v-bind="item"></slot>
  </li>
</ul>