在子组件中写插槽标签slot给slot添加name属性。
子组件中的代码:
<template>
<div class="navBox">
<!-- 菜单栏导航 -->
<div class="menus"> </div>
<!-- 插槽 -->
<slot name="headerBox"></slot>
<!-- 用户 -->
<div class="user"></div>
</div>
<style>
.navBox{
display:flex
}
</style>
<template>
vue3 中插槽的使用,需要用template包裹插槽里的内容,#+ 插槽定义时的name的值。
写法
<template #headerBox></template>
插槽中可以填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的slot标签。
这里是用的引入的topSearchBox组件。在插槽里的组件渲染出来是headerBox的一个子元素和menu user是同一层级。
在父组件中的代码
<template>
<div class="home">
<!-- 导航条 -->
<div class="headerBox">
<indexHeader>
<!-- 子组件中预留的插槽 -->
<template #headerBox>
<topSearchBox></topSearchBox>
</template>
</indexHeader>
</div>
<!-- 内容 -->
<div class="body"> </div>
<!-- 底部 -->
<div class="footer"> </div>
</div>
<template>
<script>
import { defineComponent, defineAsyncComponent, reactive, onMounted, toRefs } from 'vue'
const indexHeader = defineAsyncComponent(() => import('./components/navBar.vue'))
const topSearchBox = defineAsyncComponent(() => import('./components/topSearchBox.vue'))
export default defineComponent({
components: {
indexHeader,
topSearchBox
},
setup () {
}
})
</script>