vue中插槽如何放入组件

在 Vue 中，可以在组件中定义插槽，然后在父组件中使用组件时使用 `<slot>` 元素来填充插槽。具体步骤如下：

1. 在子组件中定义插槽：

<template>
  <div>
    <h1>子组件标题</h1>
    <slot></slot>
  </div>
</template>

在上面的示例中，我们定义了一个名为 `default` 的插槽，它将在父组件中使用时填充。

2. 在父组件中使用子组件，并填充插槽：

<template>
  <div>
    <my-component>
      <p>这是插槽内容</p>
    </my-component>
  </div>
</template>

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

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

在上面的示例中，我们使用 `<my-component>` 元素来引入子组件，并在其中使用 `<p>` 元素来填充插槽。

注意，如果子组件中有多个插槽，可以通过 `name` 属性来指定插槽名。在父组件中使用该插槽时，通过 `slot` 元素的 `name` 属性来指定插槽名。例如：

<!-- 子组件 -->
<template>
  <div>
    <h1>子组件标题</h1>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <div>
    <my-component>
      <div slot="content">
        <p>这是内容插槽</p>
      </div>
      <div slot="footer">
        <p>这是页脚插槽</p>
      </div>
    </my-component>
  </div>
</template>