vue3中插槽slot的使用

在子组件中写插槽标签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>