vue父组件调用子组件的插槽

在 Vue 中，父组件可以通过使用 `<slot>` 元素在子组件中创建插槽，然后在父组件中调用子组件的插槽。下面是一个简单的示例：

子组件：

<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>

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

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

在上面的示例中，父组件调用了子组件的两个插槽，分别是名为 header 和 footer 的插槽。在子组件中，使用 `<slot>` 元素来定义插槽，并使用 `name` 属性来指定插槽的名称。在父组件中，使用 `<template>` 元素来为插槽提供内容，并使用 `v-slot` 指令来指定插槽的名称。