vue3中的插槽使用

在Vue 3中，插槽的使用方式略有不同。Vue 3中的插槽被称为 `slots`，可以通过`<slot>`组件来定义和使用它们。下面是一个简单的示例：

<template>
  <div>
    <h1>父组件</h1>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ParentComponent'
}
</script>

在上面的示例中，`<slot></slot>`组件用于定义插槽。现在，我们可以在父组件中使用该组件，并在插槽中插入子组件或其他内容：

<template>
  <div>
    <parent-component>
      <h2>子组件</h2>
    </parent-component>
  </div>
</template>

<script>
import ParentComponent from './ParentComponent.vue'

export default {
  components: {
    ParentComponent
  }
}
</script>

在上面的示例中，`<h2>子组件</h2>`被插入到了父组件的插槽中。

你还可以为插槽设置默认内容，如果没有提供任何内容，则会显示默认内容。让我们修改父组件稍微：

<template>
  <div>
    <h1>父组件</h1>
    <slot>这是默认内容</slot>
  </div>
</template>

<script>
export default {
  name: 'ParentComponent'
}
</script>

现在，如果我们在父组件中不提供任何内容，那么默认内容就会显示出来：

<template>
  <div>
    <parent-component></parent-component>
  </div>
</template>

<script>
import ParentComponent from './ParentComponent.vue'

export default {
  components: {
    ParentComponent
  }
}
</script>

在上面的示例中，由于未提供任何内容，所以默认内容"这是默认内容"会被显示出来。

这就是Vue 3中插槽的基本使用方式。希望能帮到你！如果还有其他问题，请随时提问。