<!-- 插槽组件 -->
<section class="hello">
<!-- 默认插槽,如果在使用组件时没有提供内容,将显示"Welcome" -->
<slot>Welcome</slot>
<!-- 具名插槽,名为"content"。这意味着当使用组件时,可以为这个插槽提供特定的内容 -->
<slot name="content"></slot>
</section>
<!-- 调用组件 -->
<Hello>
<!-- 这部分内容将替换默认插槽的内容 -->
123
<!-- 使用 template 标签并指定 v-slot:content 来为具名插槽"content"提供内容 -->
<template v-slot:content>
1234
</template>
</Hello>
<!-- 插槽组件 -->
<!-- 具名插槽,名为"footer"。此插槽还提供了额外的属性 foo 和 bar,这些属性可以在使用组件时被访问 -->
<slot name="footer" foo="for" :bar="number"></slot>
<!-- 调用组件 -->
<!-- 使用 template 标签并指定 v-slot:footer 来为具名插槽"footer"提供内容 -->
<!-- slotProps 是一个对象,它包含了插槽提供的所有属性,这样我们就可以在模板中使用它们 -->
<template v-slot:footer="slotProps">
<!-- 使用 slotProps.foo 和 slotProps.bar 来访问插槽提供的属性 -->
{{slotProps.foo + '-' + slotProps.bar}}
</template>