2.13 vue中插槽

1.有时我们需要多个插槽。例如对于一个带有如下模板的 <base-layout> 组件：

<div class="container">
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer>
    <!-- 我们希望把页脚放这里 -->
  </footer>
</div>

对于这样的情况，<slot> 元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽：

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

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

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

然而，如果你希望更明确一些，仍然可以在一个 <template> 中包裹默认插槽的内容：

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

注意 **v-slot 只能添加在 <template> 上 和组件上，因为组件的最外层也是template。

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

这是vue的编译原则，也就是说，在父组件中使用子组件，向子组件插槽中编写内容时，插件里面的是无法访问到子组件的数据

2.那如何在父组件中，使用子组件的插槽时，能使用子组件的值呢

<!--子组件 current-user -->
<template>
   <div>
      <slot>默认</slot>
   </div>
</template>
<script>

export default {
  data () {
    return {
          user:{
           firstName: 'lastName'
            }
      }
  }
</scprit>

在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

3.解构属性 使用插槽 也可以使用解构的方式来获取user，这里的user是不可以变的，必须使用子组件中定义的值。可以是用解构重命名的方式来改变名字，比如{user:person}，这样就可以使用person这个名字了

<current-user>
  <template v-slot:default="{user}">
    {{ user.firstName }}
  </template>
</current-user>

4.动态插槽名

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

export default {
  data () {
    return {
          user:{
             dynamicSlotName:'default'
            }
      }
  }
</scprit>

5.具名插槽的缩写
跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

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

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

6.具名插槽的缩写+解构使用插槽属性

 <current-user #default="{ user }">
  {{ user.firstName }}
</current-user>

7.插槽 prop 允许我们将插槽转换为可复用的模板，这些模板可以基于输入的 prop 渲染出不同的内容。这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。

例如，我们要实现一个 <todo-list> 组件，它是一个列表且包含布局和过滤逻辑：

<ul>
  <li
    v-for="todo in filteredTodos"
    v-bind:key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

我们可以将每个 todo 作为父级组件的插槽，以此通过父级组件对其进行控制，然后将 todo 作为一个插槽 prop 进行绑定：

<ul>
 <li
   v-for="todo in filteredTodos"
   v-bind:key="todo.id"
 >
   <!--
   我们为每个 todo 准备了一个插槽，
   将 `todo` 对象作为一个插槽的 prop 传入。
   -->
   <slot name="todo" v-bind:todo="todo">
     <!-- 后备内容 -->
     {{ todo.text }}
   </slot>
 </li>
</ul>

现在当我们使用 <todo-list> 组件的时候，我们可以选择为 todo 定义一个不一样的 <template> 作为替代方案，并且可以从子组件获取数据：

<todo-list v-bind:todos="todos">
  <template v-slot:todo="{ todo }">
    <span v-if="todo.isComplete">✓</span>
    {{ todo.text }}
  </template>
</todo-list>