作用域插槽用法

1.前言

今天学习vue插槽，作用域插槽不太明白，以此篇加深记忆。

2.正文

官方给的是：有时让插槽内容能够访问子组件中才有的数据是很有用的，

为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个 attribute 绑定上去：

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

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

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

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

这是vue官方给的用法，自己的理解就是，自已定义的子组件是有作用域的，父组件模板是拿不到子组件的数据的，这时候就需要把子组件里的数据传递到父组件中，vue 给我们提供了一个方法。固定用法，接收的变量是任意命名的， 

slotProps作为一个参数传递，我们是可以解构的，书写更加简单方便

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