vue3使用$slot

在 Vue 3 中，组件的插槽语法有一些变化，主要是使用了新的 `<slot>` 标签和 `v-slot` 指令来实现。下面是一些使用示例：

1. 命名插槽：

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot name="header"></slot>
    <div class="content">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component>
      <template v-slot:header>
        <h1>Header</h1>
      </template>
      <p>Hello, world!</p>
      <template v-slot:footer>
        <p>Footer</p>
      </template>
    </child-component>
  </div>
</template>

在子组件中，使用 `<slot>` 标签定义插槽，可以通过 `name` 属性来定义命名插槽。在父组件中，使用 `v-slot` 指令来绑定插槽内容，可以通过 `v-slot:name` 的方式来绑定命名插槽。

2. 默认插槽：

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component>
      <p>Hello, world!</p>
    </child-component>
  </div>
</template>

在子组件中，使用 `<slot>` 标签定义默认插槽。在父组件中，直接在组件内放置内容即可填充默认插槽。

3. 作用域插槽：

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot v-bind:user="user"></slot>
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component>
      <template v-slot="{ user }">
        <p>Hello, {{ user.name }}!</p>
      </template>
    </child-component>
  </div>
</template>

在子组件中，使用 `<slot>` 标签定义插槽，并使用 `v-bind` 指令将数据传递给插槽内容。在父组件中，使用 `v-slot` 指令来定义作用域插槽，并使用对象解构语法来获取传递的数据。