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

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

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

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

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

例如以下代碼：

模板代碼

<template>
  <div>
    <h3>組合API模式下動(dòng)態(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. 通過動(dòng)態(tài)組件名的方式賦值給：is無法實(shí)現(xiàn)

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

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

因?yàn)閏omponent組件的:is指令需要已注冊(cè)的組件對(duì)象。

請(qǐng)看如下代碼：

<template>
  <div>
    <h3>組合API模式下使用動(dòng)態(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>

以上代碼會(huì)引起錯(cuò)誤提示：兩個(gè)導(dǎo)入的子組件未使用：

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

如何解決這個(gè)問題呢？

3. 使用組合式和選項(xiàng)式API結(jié)合的方式解決這個(gè)問題

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

由于選項(xiàng)式API可以顯式注冊(cè)導(dǎo)入的子組件，可以另外寫一個(gè)選項(xiàng)式API模式的script來顯式注冊(cè)子組件。

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

代碼如下：

// 專門定義一個(gè)選項(xiàng)式api模塊，來注冊(cè)組件
<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>

兩個(gè)子組件已經(jīng)成功渲染了。