如何将ComponentX的内容匹配到ComponentA的对应插槽中？

你当前的ComponentX写法错误地定义了自身的插槽，而非向ComponentA的插槽提供内容。正确的做法是让ComponentX直接生成对应ComponentA插槽的内容，并通过插槽指令指定归属。

正确的ComponentX写法 #

<template>
  <!-- 对应ComponentA的content插槽 -->
  <template #content>
    <div class="d-flex flex-column">
      <v-select label="test" :items="[]" />
    </div>
  </template>

  <!-- 对应ComponentA的actions插槽 -->
  <template #actions>
    <v-row>
      <v-spacer />
      <v-btn text="OK" @click="doSomething" />
    </v-row>
  </template>
</template>

<script setup>
// 定义插槽内容中的方法
const doSomething = () => {
  // 这里编写你的点击逻辑
  console.log('OK按钮被点击')
}
</script>

MainComponent.vue 写法保持不变 #

<template>
  <div>
    <component-A>
      <component-X />
    </component-A>
  </div>
</template>

<script setup>
import ComponentA from './ComponentA.vue'
import ComponentX from './ComponentX.vue'
</script>

原理说明 #

• ComponentA的具名插槽会自动扫描子内容中带有对应#插槽名的template元素，将其内容填充到自身的插槽位置
• ComponentX的模板直接输出两个绑定了ComponentA插槽名的template节点，无需额外包裹元素，Vue支持组件返回多个这类节点
• 这种写法本质是将原本写在MainComponent里的插槽内容抽离成独立组件，实现代码复用

内容的提问来源于stack exchange，提问作者darthvader