vue3 子组件的内容放到父组件的插槽位置

Vue 3 引入了新的 slot 插槽系统，提供了更灵活的插槽内容传递方式。在 Vue 3 中，你可以使用 v-slot 指令或者简写 # 来定义插槽，并将子组件的内容传递到父组件的插槽位置。这通常在父组件中通过 <slot> 元素来定义一个插槽位置，然后在使用子组件的地方通过模板定义具体的插槽内容。

以下是一个简单的例子来说明如何将子组件的内容放到父组件的插槽位置：

首先，在父组件中定义一个插槽：

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>这是父组件的内容</h1>
    <ChildComponent>
      <template v-slot:default>
        <p>这是放在插槽中的父组件的内容</p>
      </template>
    </ChildComponent>
  </div>
</template>

然后，在子组件中，你可以使用 <slot> 标签来定义接收插槽内容的位置：

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>这是子组件的内容</h2>
    <slot>这里可以放置默认内容，如果父组件没有提供插槽内容</slot>
  </div>
</template>

在 Vue 3 中，你也可以使用简写形式来定义插槽：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent #default="{ slots }">
    <template v-slot:default>
      <p>这是放在插槽中的父组件的内容</p>
    </template>
  </ChildComponent>
</template>

在这个例子中，子组件的 <slot> 标签会接收并展示父组件提供的内容。如果父组件没有提供插槽内容，则会展示 <slot> 标签内的默认内容。