快捷導(dǎo)航

Vue3動態(tài)組件component不生效問題解決方法

更新時間：2024年08月29日 09:49:34 作者：技術(shù)錢

動態(tài)組件component是Vue中非常實用的一個功能,它可以根據(jù)條件動態(tài)切換不同的組件,在Vue3中使用方法和Vue2基本一致,在vue3使用component動態(tài)組件展示組件時,組件就是不展示顯示空白,所以本文記錄了Vue3動態(tài)組件component不生效問題解決方法,需要的朋友可以參考下

問題： vue3循環(huán)渲染動態(tài)組件component不生效，頁面空白

在vue3使用component動態(tài)組件展示組件時，組件就是不展示顯示空白。在vue2中使用動態(tài)變量component展示組件都是沒問題。試了很多方法踩了很多坑，所以記錄下：

  <div class="preview-list" id="canvas-area">
    <component
      v-for="component in components" 
      :key="component.id"
      :is="component.name"
      v-bind="component.props" 
      />
  </div>
<script setup lang="ts">
import LText from '@/components/LText'
import { ref } from 'vue'
interface styleProps = {
   text: string;
   fontSize: string;
}
interface componentData = {
  id: number;
  name: string;
  props?: styleProps;
}
const components = ref<componentData[]>([
    { id: 1, name: 'LText', props: { text: 'hello', fontSize: '12px'}},
    { id: 2, name: 'LText', props: { text: 'hello2', fontSize: '14px'}},
    { id: 3, name: 'LText', props: { text: 'hello3', fontSize: '16px'}}
])
</script>

因為vue3使用的是setup語法，組件只要import導(dǎo)入就行不需要再像vue2中在components掛載，這樣導(dǎo)致我想渲染的組件是沒有渲染出來頁面出現(xiàn)空白，嘗試了很多辦法對應(yīng)的組件里面添加多個script指定對應(yīng)的組件名，還是沒生效

解決方法

使用shallowReactive或者shallowRef把對應(yīng)的組件名稱重新定義下，遍歷component時，is采用對象key獲取對應(yīng)的對應(yīng)的組件，這樣組件就顯示出來了

  <div class="preview-list" id="canvas-area">
    <component
      v-for="component in components" 
      :key="component.id"
      :is="componentsName[component.name]"
      v-bind="component.props" 
      />
  </div>
<script setup lang="ts">
import LText from '@/components/LText'
import { ref, shallowReactive } from 'vue'
interface styleProps = {
   text: string;
   fontSize: string;
}
interface componentData = {
  id: number;
  name: string;
  props?: styleProps;
}
type componentName = {
  [key: string]: any
}
const components = ref<componentData[]>([
    { id: 1, name: 'LText', props: { text: 'hello', fontSize: '12px'}},
    { id: 2, name: 'LText', props: { text: 'hello2', fontSize: '14px'}},
    { id: 3, name: 'LText', props: { text: 'hello3', fontSize: '16px'}}
])
// 解決方案
const componentsName = shallowReactive<componentName>({
  LText
})

</script>

拓展：Vue3使用動態(tài)組件 Component

一、動態(tài)組件的概念

多個組件通過component標(biāo)簽掛載在同一個組件中，通過觸發(fā)動作進行動態(tài)切換，常搭配<keep-alive></keep-alive>使用。

二、使用場景

多用于以下幾個場景：

1、tab欄的切換

管理系統(tǒng)中切換不同的菜單，展示tab，切換tab可以渲染不同組件，一般搭配<keep-alive></keep-alive>使用。

2、條件性地渲染組件

根據(jù)某個條件決定渲染哪個組件。通過在<component>元素上使用v-if指令來實現(xiàn)。

3、動態(tài)切換組件

根據(jù)用戶的交互或狀態(tài)變化，切換顯示不同的組件。通過在<component>元素上使用is屬性來指定要渲染的組件。

4、異步加載組件

當(dāng)組件非常大或需要懶加載時，可以使用動態(tài)組件來異步加載組件，從而提高頁面加載速度。

5、與路由結(jié)合使用

在路由配置中使用動態(tài)組件，根據(jù)不同的路由路徑加載相應(yīng)的組件。

三、使用示例

1、掛載組件

通過vue的defineAsyncComponent實現(xiàn)掛載組件

const CourseData = defineAsyncComponent(() => import("@/components/Chart/courseData.vue"));

2、component的is屬性

<component :is="item.component" />

3、動態(tài)組件傳值

動態(tài)組件的傳值遵循基本組件傳值規(guī)則，除了支持v-bind傳值以外，還支持ref引用傳值；使用引用傳值需要注意的是，需要確定組件之后，再使用ref屬性進行傳值，否則將會無法獲取應(yīng)用組件的屬性。使用v-bind傳值代碼如下所示：

<template>
    <div>
        <component :is="item.component" :data="reportData" :exam-data="exampData"/>
    </div>
</template>
<script lang="ts" setup>
const CourseData = defineAsyncComponent(() => import("@/components/Chart/courseData.vue"));
const item = reactive({
    component: CourseData
})
 
const reportData = ref("aaaaa")
const exampData = ref("bbbb")
</script>

4、動態(tài)組件數(shù)據(jù)緩存

若是數(shù)據(jù)需要動態(tài)渲染，組件切換之后會導(dǎo)致之前獲得的數(shù)據(jù)丟失，這個時候，若我們想要在組件切換過程中保持這些組件的狀態(tài)，避免重復(fù)渲染導(dǎo)致性能問題，則可以使用<keep-alive></keep-alive>包裹動態(tài)組件，來緩存組件中的數(shù)據(jù)：

<template>
  <div>
    <div id="dynamic-component-demo" class="demo">
      <button
        v-for="tab in tabs"
        :key="tab"
        :class="['tab-button', { active: currentTab === tab }]"
        @click="currentTab = tab"
      >
        {{ tab }}
      </button>
      <keep-alive>
        <component
          :is="item.component"
          class="tab"
        ></component>
      </keep-alive>
    </div>
  </div>
</template>

到此這篇關(guān)于Vue3動態(tài)組件component不生效問題解決方法的文章就介紹到這了,更多相關(guān)Vue3 component不生效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: