// app.vue
<template>
<titled-frame>
<template v-slot:header>
<!-- The code below goes into the header slot -->
My Image's Title
</template>
<!-- The code below goes into the default slot -->
<img src="an-image.jpg">
</titled-frame>
</template>就像之前一样，如果我们想将内容添加到默认槽中，只需将其直接放在 titled-frame 组件中。但是，要将内容添加到命名槽中，我们需要用 v-slot 指令将代码包裹在在 template 标记中。在 v-slot 之后添加冒号 (:) ，然后写出要传递内容的 slot 的名称。
注意， v-slot 是 Vue 2.6 的新版本，所以如果你使用的是旧版本，则需要阅读 关于不推荐的slot语法的文档。
作用域插槽
还需要知道的另一件事是插槽可以将数据/函数传递给他们的孩子。 为了证明这一点，我们需要一个完全不同的带有插槽的示例组件：创建一个组件，该组件将当前用户的数据提供给其插槽：
// current-user.vue
<template>
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>
</template><script>
export default {
data () {
return {
user: ...
}
}
}
</script>
该组件有一个名为 user 的属性，其中包含关于用户的详细信息。默认情况下，组件显示用户的姓，但请注意，它使用 v-bind 将用户数据绑定到 slot 。这样，我们就可以使用这个组件向它的后代提供用户数据
// app.vue
<template>
<current-user>
<template v-slot:default="slotProps">{{ slotProps.user.firstName }}</template>
</current-user>
</template>为了访问传递给 slot 的数据，我们使用v-slot指令的值指定作用域变量的名称。
这里有几点需要注意：
我们指定了 default 的名称，但是不需要为默认槽指定名称。相反，我们可以使用
v -slot="slotProps" 。不需要使用 slotProps 作为名称，可以随便叫它什么。
如果只使用默认槽，可以跳过内部 template 标记，直接将 v-slot 指令放到当前 current-user 上。
可以使用对象解构来创建对作用域插槽数据的直接引用，而不是使用单个变量名。换句话说，可以使用
v-slot="{user}" 代替
v-slot="slotProps” ，然后可以直接使用 user 而不是 slotProps.user 。所以，上面的例子可以这样重写
