在合成中动态引用时子组件不呈现 API

Question

我正在将一些组件从 vue 3 的选项 API 转换为组合 API。在这个特定的组件中，我有两个嵌套的子组件：

<script lang="ts" setup>
import ShiftOperation from "@/components/transformation-widgets/ShiftOperation.vue";
import RawJolt from "@/components/transformation-widgets/RawJolt.vue";

console.log([ShiftOperation, RawJolt])

...

据我了解，如果您在脚本标记中使用 setup 属性，那么您所要做的就是将组件导入到变量中，就像我在上面所做的那样，它应该可用对于模板，无需执行任何其他操作，就像它不像旧选项 api 那样，您必须将这些组件注入父组件。

两个组件都导入成功（通过控制台日志确认：

当我呈现这个父组件时，我使用两个子组件来呈现一个数据数组，我在其中根据我正在处理的每个数据块中的信息在模板中动态引用子组件遍历：

<template>
  <div class="renderer-wrapper">
    <component
        v-for="(block, index) in store.specBlocks"
        v-bind:key="index"
        :block="block"
        :index="index"
        :is="determineBlockComponent(block)"
        @block-operation-updated="updateBlock"
    >
    </component>
  </div>
</template>

// logic for determining the component to use:
export const determineBlockComponent = (block: JoltOperation) => {
  switch (block.renderComponent) {
    case 'shift':
      return 'ShiftOperation'
    default:
      return 'RawJolt'
  }
}

这在其选项 api 版本中运行良好，但由于某些原因，组件实际上并未呈现。它们出现在元素选项卡中：

但是它们没有出现在视图中。我还在子组件中添加了一个 created 生命周期挂钩，只是 console.log 说出“created X”，但这些挂钩不会触发。

业务逻辑方面没有任何改变，它只是从选项 api 到组合 api，所以我假设我遗漏了一些关键细节。

有什么想法吗？

Answer 1

您的 determineBlockComponent 函数不应该 return 字符串而是组件的对象。将 return 'ShiftOperation' 替换为 return ShiftOperation

在合成中动态引用时子组件不呈现 API

Child components not rendering when referenced dynamically in composition API

vue.js

vue-composition-api