// app.vue
<template>
<current-user v-slot="{user}">
{{ user.firstName }}
</current-user>
</template>
还有几点要记住：
可以使用 v-bind 指令绑定多个值。
也可以将函数传递到作用域槽。许多库使用它来提供可重用的函数组件。
v-slot 的别名是 # 。因此，可以用 #header=”data” 来代替 v-slot:header=”data” 。还可以使用 #header 来代替 v-slot:header (前提:不是作用域插槽时)。对于默认插槽，在使用别名时需要 指定默认名称 。换句话说，需要这样写 #default=”data” 而不是 #=”data” 。
可以从 文档 中了解更多的细节，但这足以帮助你理解在本文剩下部分中讨论的内容。
你能用插槽做什么？
插槽不是为了一个目的而构建的，或者至少如果它们是，它们已经超越了最初的意图，成为做许多不同事物的强大工具。
可重用的模式
组件总是被设计为可重用的，但是某些模式对于使用单个“普通”组件来实施是不切实际的，因为为了自定义它，需要的 props 数量可能过多或者需要通过 props 传递大部分内容或其它组件。
插槽可用包裹外部的HTML标签或者组件，并允许其他HTML或组件放在具名插槽对应名称的插槽上。
对于的第一个例子，从简单的东西开始:一个按钮。假设咱们的团队正在使用 Bootstrap。使用Bootstrap，按钮通常与基本的 “btn” 类和指定颜色的类绑定在一起，比如 “
btn-primary” 。你还可以添加 size 类，比如 ‘btn-lg’ 。为了简单起见，现在让我们假设你的应用使用
btn 、 btn-primary 和 btn-lg 。你不希望总是必须在按钮上写下这三个类，或者你不相信新手会记得写下这三个类。在这种情况下，可以创建一个自动包含所有这三个类的组件，但是如何允许自定义内容？ prop 不实用，因为允许按钮包含各种HTML，因此我们应该使用一个插槽。
<!-- my-button.vue -->
<template>
<button class="btn btn-primary btn-lg">
<slot>Click Me!</slot>
</button>
</template>现在我们可以在任何地方使用它，无论你想要什么内容
<!-- 使用 my-button.vue -->
<template>
<my-button>
<img src="/img/awesome-icon.jpg"> 我是小智！
</my-button>
</template>当然，你可以选择比按钮更大的东西。 坚持使用Bootstrap，让我们看一个模态：
<!-- my-modal.vue -->
