引用插槽

app.vue:

<template>
<slotsba><div><h3>插槽标题</h3><p>插槽内容</p></div>
</slotsba>
</template>
<script>
import slotsba from "./components/slotsba.vue";
export default{components: { slotsba },data(){return{}}
}
</script>

slotbase.vue:

<template>
<div><h3>插槽</h3><!-- 引用插槽就是把一部分html拿过来 --><slot></slot>
</div>
</template>
<script>
export default{data(){return{}}
}
</script>

渲染作用域：

app.vue

v-slot:可以简写成#

<template><!-- 多个插槽内容 --><slotstwo>
<template #header><!-- 这里没指认header的值所以会显示‘插槽默认值’ --><!-- <h3>{{ message }}</h3> -->
</template>
<template v-slot:main><p>内容</p>
</template></slotstwo>
</template>
<script>
import Slotstwo from './components/slotstwo.vue';
export default{components: { Slotstwo },data(){return{
message:"插槽续集"}}
}
</script>

slotstwo.vue:

<template>
<div><h3>slots续集</h3><slot name="header">插槽默认值</slot><br/><a href="#">我是插槽中间的内容</a><slot name="main">插槽默认值</slot>
</div>
</template>
<script>
export default{data(){return{}}
}
</script>

想要父组件和子组件一起显示

具名插槽：