独占默认插槽
单个prop
为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个 attribute 绑定上去
子：
<template>
<div>
<span>
<slot :user="user">
{{ user.lastName }}
</slot>
</span>
</div>
</template>
<script>
export default {
data() {
return {
user: {firstName: "Json ", lastName: "Tom",},
}
},
}
</script>绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：
父：
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
或者
<current-user v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</current-user>
或者 独占默认插槽的缩写语法
<current-user v-slot="slotProps">
{{ slotProps.user.firstName }}
</current-user>
或者 传入具体的插槽 prop
<current-user v-slot="{ user }">
{{ user.firstName }}
</current-user>
或者 重命名
<current-user v-slot="{ user: person }">
{{ person.firstName }}
</current-user>显示结果：Json
多个prop
子
<template>
<div>
<span>
<slot :user="user" :user2="user2">
{{ user.lastName }}-{{ user2.lastName }}
</slot>
</span>
</div>
</template>
<script>
export default {
data() {
return {
user: { firstName: "Json ", lastName: "Tom", },
user2: { firstName: "Json2 ", lastName: "Tom2", },
}
},
}
</script>调整部分子组件写法，各种显示效果
子：
<slot :user="user" :user2="user2">
{{ user.lastName }}-{{ user2.lastName }}
</slot>
父：
<current-user></current-user>
显示效果：Tom-Tom2
------------
子：
<slot :user="user" :user2="user2">
{{ user.lastName }}-{{ user2.lastName }}
</slot>
父：
<current-user v-slot="{ user: person, user2: person2 }">
{{ person.firstName }}----{{ person2.firstName }}
</current-user>
显示效果：Json ----Json2
------------
子：
<slot :user="user" :user3="user2">
{{ user.lastName }}-{{ user3.lastName }}
</slot>
父：
<current-user v-slot="{ user, user3 }">
{{ user.firstName }}----{{ user3.firstName }}
</current-user>
或
<current-user v-slot="{ user: person, user3: person2 }">
{{ person.firstName }}----{{ person2.firstName }}
</current-user>
显示效果：Json ----Json2
------------
子：
<slot :user="user" :user3="user2">
{{ user.lastName }}-{{ user3.lastName }}
</slot>
父：
<current-user></current-user>
显示效果：报错定义后备内容：prop设置为undefined
子：
<template>
<div>
<span>
<slot :user="user">
{{ user.lastName }}
</slot>
</span>
</div>
</template>
<script>
export default {
data() {
return {
user: undefined ,
}
},
}
</script>
父：
<current-user v-slot="{ user = { firstName: 'Guest' } }">
{{ user.firstName }}
</current-user>
显示效果：Guest多个插槽
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
<template v-slot:other="otherSlotProps">
...
</template>
</current-user>
