v-slot 作用域插槽
有时让插槽内容能够访问子组件中才有的数据是很有用的。例如，设想一个带有如下模板的 <current-user> 组件：
代码语言：javascript复制<span>
<slot>{{ user.lastName }}</slot>
</span>我们可能想换掉备用内容，用名而非姓来显示。如下：
代码语言：javascript复制
<current-user>
{{ user.firstName }}
</current-user>然而上述代码不会正常工作，因为只有 <current-user> 组件可以访问到 user 而我们提供的内容是在父级渲染的。
为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个特性绑定上去：
代码语言：javascript复制<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>绑定在 <slot> 元素上的特性被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：
代码语言：javascript复制<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。
独占默认插槽的缩写语法
在上述情况下，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：
代码语言：javascript复制<current-user v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</current-user>这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽：
代码语言：javascript复制<current-user v-slot="slotProps">
{{ slotProps.user.firstName }}
</current-user>注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确：
<!-- 无效，会导致警告 -->
代码语言：javascript复制<current-user v-slot="slotProps">
{{ slotProps.user.firstName }}
<template v-slot:other="otherSlotProps">
slotProps is NOT available here
</template>
</current-user>只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法：
代码语言：javascript复制
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
<template v-slot:other="otherSlotProps">
...
</template>
</current-user>
