插槽进阶版

1.编译作用域

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
（也就是说子级模板只能使用自己模板的内容，父级模板也只能访问腹肌模板的内容）

2.具名插槽

元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽，

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

这里没有使用name属性的，默认名字是default

在插入的时候使用 （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>

注意这里v-slot只能放在template插槽里面，只有一种例外，后面会介绍，这里没有放在template标签里面的内容，会被认定为是默认插槽的内容

3，作用域插槽

因为编译作用域的存在，父级组件无法访问到子级作用域的内容，有时让插槽内容能够访问子组件中才有的数据是很有用的

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

比如这里想要访问到子级作用域中的user对象，就可以把user当做slot的一个属性绑定上去，

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

这里拿到的slotProps里面包含了所有的插槽props

4，默认插槽的缩写语法

当只有一个默认的插槽时，我们可以把v-slot写在组件上，比如

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

当然这里的default是可以省略的

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

注意：默认插槽的缩写语法是不能和具名插槽混在一起使用的，当有多个插槽时，要为所有的插槽提供完整的template语法

5.解构插槽的写法

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

还可以给它起一个别名

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

6，具名插槽的缩写语法

使用#来表示v-slot：
注意：这里必须是要有一个名字，如果是默认的插槽，必须要用default

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