vue3插槽

在Vue 3中，插槽使用了新的语法和API。与Vue 2中的插槽不同，Vue 3中的插槽是通过<slot>元素来定义和使用的。

在父组件中，可以通过在组件模板中使用<slot>元素来定义插槽。可以给插槽指定一个名称，并且在具体使用插槽的地方，使用<slot>元素的name属性来指定使用哪个插槽。

<!-- 父组件模板 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

在子组件中，可以通过在组件模板中使用<slot>元素来使用插槽。如果没有指定插槽名称，则会使用默认插槽。

<!-- 子组件模板 -->
<template>
  <div>
    <slot name="header">
      <!-- 如果父组件没有提供插槽内容，则显示默认内容 -->
      <h1>Default Header</h1>
    </slot>
    
    <p>Some content...</p>
    
    <slot></slot>
    
    <slot name="footer">
      <!-- 如果父组件没有提供插槽内容，则显示默认内容 -->
      <footer>Default Footer</footer>
    </slot>
  </div>
</template>

使用插槽时，父组件可以像使用常规HTML元素一样使用子组件，并在组件标签中通过具名插槽的属性来提供插槽内容。

<template>
  <div>
    <my-component>
      <template #header>
        <h1>Custom Header</h1>
      </template>
      
      <p>Some custom content...</p>
      
      <template #footer>
        <footer>Custom Footer</footer>
      </template>
    </my-component>
  </div>
</template>

与Vue 2中的插槽不同，Vue 3的插槽可以在组件内部进行操作和修改，也可以在组件之间进行传递和组合。这为更灵活的组件设计和复用提供了更多的可能性。