vue3中插槽的用法

在Vue3中，插槽的使用方法与Vue2有所不同。Vue3中的插槽被称为“组件模板”，可以通过`<slot>`标签在组件中定义插槽，并在父组件中使用`<template v-slot:slotName>`或`<slot name="slotName">`来填充插槽。具体使用方法如下：

1. 基本使用：

// 子组件中定义插槽
<template>
  <div>
    <slot></slot>
  </div>
</template>

// 父组件中使用插槽
<template>
  <div>
    <child-component>
      <p>这是插槽内容</p>
    </child-component>
  </div>
</template>

2. 具名插槽：

// 子组件中定义具名插槽
<template>
  <div>
    <slot name="header"></slot>
    <div>这是组件内容</div>
    <slot name="footer"></slot>
  </div>
</template>

// 父组件中使用具名插槽
<template>
  <div>
    <child-component>
      <template v-slot:header>
        <h1>这是头部插槽内容</h1>
      </template>
      <template v-slot:footer>
        <p>这是底部插槽内容</p>
      </template>
    </child-component>
  </div>
</template>

3. 动态插槽名：

// 子组件中定义动态插槽名
<template>
  <div>
    <slot :name="slotName"></slot>
  </div>
</template>

// 父组件中使用动态插槽名
<template>
  <div>
    <child-component :slotName="'header'">
      <h1>这是头部插槽内容</h1>
    </child-component>
  </div>
</template>

4. 作用域插槽：

// 子组件中定义作用域插槽
<template>
  <div>
    <slot name="item" v-for="item in items" :item="item"></slot>
  </div>
</template>

// 父组件中使用作用域插槽
<template>
  <div>
    <child-component>
      <template v-slot:item="slotProps">
        <li>{{ slotProps.item }}</li>
      </template>
    </child-component>
  </div>
</template>