vue3中的插槽

插槽

• 默认插槽
• 具名插槽，v-slot可以简写为#

当前组件中
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
在父组件中使用
<BaseLayout>
  <template v-slot:header>
    <!-- header 插槽的内容放这里 -->
  </template>
</BaseLayout>

• 动态插槽 #[dynamicSlotName]
• 作用域插槽（父组件通过props传递，子组件通过插槽向父组件传递）

子组件
 <ul>
    <li style="color: red"><slot name="header" message="1"></slot></li>
    <li><slot message="2"></slot></li>
    <li style="color: green"><slot name="footer" message="3"></slot></li>
  </ul>
父组件中
 <HelloWord>
     <template #header="m">{{ m.message }}</template>
     <template #default>1111</template>
     <template #footer="f">{{ f.message }}</template>
  </HelloWord>