1、slot中可以设置一个默认的内容,BaseCard.vue
<template>
<div>
<header>
<slot name="header">
<h2>The Default</h2>
</slot>
</header>
<slot></slot>
</div>
</template>
如果被slot包围的html中已经有h了,显示html中的内容,不管是h1/h2/h3
2、使用v-if="$slots.header"可以根据是否有header控制显示
<template>
<div>
<header>
<slot name="header" v-if="$slots.header">
<h2>The Default</h2>
</slot>
</header>
<slot></slot>
</div>
</template>
3、“v-slot:”可以用“#”代替
<template>
<section>
<base-card>
<template #header>
<h3>{{ fullName }}</h3>
<base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
</template>
<template #default>
<p>{{ infoText }}</p>
</template>
</base-card>
</section>
</template>