在子组件中预留一个slot标签，父组件可以在子组件标签中写入文本或者其他标签，这部分内容会显示在子组件中的slot标签的位置
子组件标签Head
<template>
?? ?head组件<br />
?? ?<slot></slot>
</template><script>
?? ?export default{
?? ??? ?name:'Head'
?? ?}
</script><style>
</style>
父组件Home
<template>
? <div class="home">
? ??<Head :title='msg'
?? ??? ?@receive="printMsg"
?? ?>
?? ??? ?Head标签内的文本
?? ?</Head>
??</div>
</template><script>
import Head from '@/components/Head.vue'export default {
? name: 'Home',
? components: {????????Head
? }
}
</script>
多个slot时
子组件中有多个slot时，以name属性区分
Head组件
?
<template>
?? ?head组件<br />
?? ?<slot></slot>? ?<slot name="s1"></slot>
?? ?<slot name="s2"></slot>
</template><script>
?? ?export default{
?? ??? ?name:'Head'
?? ?}
</script><style>
</style>
Home组件
?
<template>
? <div class="home">
? ??<Head :title='msg'
?? ??? ?@receive="printMsg"
?? ?>
?? ??? ?Head标签内的文本????????<template v-slot:s1>
?? ??? ??? ?<label>slot1的内容</label>
?? ??? ?</template>
?? ??? ?<template v-slot:s2>
?? ??? ??? ?<label>slot2的内容</label>
?? ??? ?</template>
?? ?</Head>
??</div>
</template><script>
import Head from '@/components/Head.vue'export default {
? name: 'Home',
? components: {????????Head
? }
}
</script>
