如何解決Vue3組合式API模式下動態(tài)組件不渲染問題

更新時間：2024年03月15日 10:03:57 作者：cppandtea

這篇文章主要介紹了如何解決Vue3組合式API模式下動態(tài)組件不渲染問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教<BR>

1. 將動態(tài)組件對象直接賦值給:is

在Vue3組合式API模式下，用component組件渲染動態(tài)組件，如果將動態(tài)組件對象直接賦值給:is指令是沒有問題的。

例如以下代碼：

模板代碼

<template>
  <div>
    <h3>組合API模式下動態(tài)組件的加載</h3>
    <component :is="CompA" />
    <component :is="CompB" />
  </div>
</template>

<script setup lang="ts">
import CompA from "./CompA.vue";
</script>

TS代碼

<script lang="ts" setup>
<script setup lang="ts">
import CompA from "./CompA.vue";
import CompB from "./CompB.vue";
</script>

</script>

效果如下，是沒有問題的：

2. 通過動態(tài)組件名的方式賦值給：is無法實現

假若需要根據不同情況賦予:is指令不同的子組件，那么就需要用一個變量來存子組件名稱。

在組合api模式下，子組件是無法渲染的。

因為component組件的:is指令需要已注冊的組件對象。

請看如下代碼：

<template>
  <div>
    <h3>組合API模式下使用動態(tài)組件名加載子組件</h3>
    <template v-for="comp in compArr" :key="comp.compName">
      <component :is="comp.compName" />
    </template>
  </div>
</template>

<script setup lang="ts">
import CompA from "./CompA.vue";
import CompB from "./CompB.vue";
const compArr = [{ compName: "CompA" }, { compName: "CompB" }];
</script>

以上代碼會引起錯誤提示：兩個導入的子組件未使用：

而且在組合式API模式下，是不能顯式注冊子組件的，兩個子組件也并沒有按我們的預期渲染出來：

如何解決這個問題呢？

3. 使用組合式和選項式API結合的方式解決這個問題

在組合式API模式下，Vue是支持多個Script代碼塊的。

由于選項式API可以顯式注冊導入的子組件，可以另外寫一個選項式API模式的script來顯式注冊子組件。

這樣在component組件中，傳入已注冊子組件的名稱即可。

代碼如下：

// 專門定義一個選項式api模塊，來注冊組件
<script lang="ts">
import { defineComponent } from "vue";
import CompA from "./CompA.vue";
import CompB from "./CompB.vue";
export default defineComponent({
  components: { CompA, CompB }
});
</script>

<script setup lang="ts">
const compArr = [{ compName: "CompA" }, { compName: "CompB" }];
</script>

兩個子組件已經成功渲染了。