我正在將一些組件從 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 >
<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，所以我假設我錯過了一些關鍵細節。
有任何想法嗎？
uj5u.com熱心網友回復：
您的determineBlockComponent函式不應回傳字串，而是回傳組件的物件。替換return 'ShiftOperation'為return ShiftOperation
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/465374.html