vue3中的slot

具名插槽

带有name的插槽称为具名插槽

子组件A内容

   <header>
      <slot  name="header"></slot>
   </header>
   <main>
      <slot  name="main"></slot>
   </main>
   <footer>
      <slot></slot>
   </footer>

父组件内容

 <A>
        <template v-slot:header>
            header 插槽的内容放这里 
        </template>

        <!-- v-slot的简写为# -->
        <template #main>
            main 插槽的内容放这里 
        </template>

        <!-- 没有提供 name 的 <slot> 出口会隐式地命名为“default” -->
        <template #default>
           name未提供
        </template>
    </A>

动态插槽名 

子组件A内容

 <header>
      <slot  name="header"></slot>
   </header>
   <main>
      <slot  name="main"></slot>
   </main>
   <footer  name='footer'>
      <slot></slot>
   </footer>

父组件内容

   <A>
        <template  #[name] >
            sss
        </template>
    </A>

    //header的内容会显示
    const name=ref('header')

作用域插槽

可以同时使用父组件域内和子组件域内的数据

子组件A的内容

<template>
   <div>
  	   <slot :text="message" :count="1"></slot>
	</div>
   <button  @click="change">点击</button>
</template>

<script lang="ts" setup>
import {   reactive,   ref } from 'vue';
  const message=ref('Hi')
  const change=()=>{
   message.value='Hello'
  }
</script>

父组件的内容

<A  v-slot="slotProps">
   {{ slotProps.text }} {{ slotProps.count }} 
</A>

使用解构
 <A  v-slot="{text , count}">
        {{ text }} {{ count }} 
 </A>