匿名插槽
<!-- child.vue -->
<slot>我是插槽默认的</slot>
<!-- parent.vue -->
<child>
我是替换默认插槽的~
</child>
<!-- child.vue -->
<slot />
具名插槽
<!-- parent.vue -->
<child>
<div slot="header">我是父组件的头部插入到子组件</div>
<div>我是父组件的内容插入到子组件</div>
<div slot="footer">我是父组件的页脚插入到子组件</div>
</child>
<!-- child.vue -->
<slot name="header" />
<slot />
<slot name="footer" />
作用域插槽
<!-- parent.vue -->
<!-- <template v-slot="msg"> -->
<template #default="msg">
<child>
<div>{{ msg.default }}</div>
</child>
</template>
<!-- child.vue -->
<slot :default="{ msg: '我是子组件的内容插入到父组件' }" />
<!-- parent.vue -->
<!-- <template v-slot="msg"> -->
<template #content="{msg}">
<h1>{{ msg }}</h1>
</template>
<!-- child.vue -->
<slot name="content" v-bind="{ msg: '我是子组件的内容插入到父组件' }" />
