快捷導(dǎo)航

Vue3動(dòng)態(tài)組件<component>渲染失效原因分析

更新時(shí)間：2024年11月01日 11:17:33 作者：小達(dá)不劉

在vue2中使用正常,但是遷移到Vue3中,發(fā)現(xiàn)組件無法渲染, 本文給大家分別展示Vue2和Vue3的代碼,組件能正常在Vue2中渲染,在Vue確沒有渲染出來,并通過代碼示例給出了解決方法,需要的朋友可以參考下

在Vue2中偽代碼如下：

<template>
    <component
        :is="currentActiveTab.component"
        ref="componentRef"
        :key="currentActiveTab.key"
        :current-active-tab="currentActiveTab"
        v-bind="currentActiveTab"
    />
</template>
<script>
import A from './components/A'
import B from './components/B'
import C from './components/C'
export default {
  components: {
    A,
    B,
    C
  },
  data() {
    return {
      tabList: [
        {
          name: '概覽視圖',
          key: 'all',
          component: 'OverviewGraph'
        }
      ],
      activetab: 'all',
    }
  },
  computed: {
    currentActiveTab() {
      return this.tabList.find((v) => v.key === this.activetab)
    }
  }
}
</script>

遷移到Vue3中代碼如下：

<template>
    <component
        :is="currentActiveTab.component"
        ref="componentRef"
        :key="currentActiveTab.key"
        :current-active-tab="currentActiveTab"
        v-bind="currentActiveTab"
    />
</template>
<script setup lang="ts">
import { ref, onMounted, computed, nextTick } from 'vue'
import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'

const tabList = ref([
    {
      name: '概覽視圖',
      key: 'all',
      component: 'OverviewGraph'
    }
  ])
  const activetab = ref('all')
  
  const currentActiveTab = computed(() => {
    return tabList.value.find((v) => v.key === activetab.value)
  })
</script>

Vue3渲染出來是醬紫的：

只有一個(gè)殼子，沒有任何內(nèi)容。

問題出在組件的名字上了：在 <script setup> 中要使用動(dòng)態(tài)組件時(shí)，需要直接用 :is="Component" 直接綁定到組件本身，而不是字符串的組件名。也就是需要把'OverviewGraph'改成OverviewGraph即可。修改后的代碼如下：

<template>
    <component
        :is="currentActiveTab.component"
        ref="componentRef"
        :key="currentActiveTab.key"
        :current-active-tab="currentActiveTab"
        v-bind="currentActiveTab"
    />
</template>
<script setup lang="ts">
import { ref, onMounted, computed, nextTick } from 'vue'
import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'

const tabList = ref([
    {
      name: '概覽視圖',
      key: 'all',
      component: OverviewGraph  // 改了這里
    }
  ])
  const activetab = ref('all')
  
  const currentActiveTab = computed(() => {
    return tabList.value.find((v) => v.key === activetab.value)
  })
</script>

到此這篇關(guān)于Vue3動(dòng)態(tài)組件<component>渲染失效原因分析的文章就介紹到這了,更多相關(guān)Vue3 component渲染失效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: