快捷導(dǎo)航

vue3 component is 不顯示的問題及解決

更新時間：2024年03月15日 09:31:55 作者：MAIMIHO

這篇文章主要介紹了vue3 component is 不顯示的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue3 component is 不顯示

原因

通過名稱傳遞必須先對其進行注冊, 將組件本身傳遞給 is 而不是其名稱，則不需要注冊

<script>
import { Transition, TransitionGroup } from 'vue'

export default {
  components: {
    Transition,
    TransitionGroup
  }
}
</script>

<template>
  <component :is="isGroup ? 'TransitionGroup' : 'Transition'">
    ...
  </component>
</template>

setup 寫法

<script setup>    
    import TestOne from './components/TestOne.vue'    
    import TestTwo from './components/TestTwo.vue'    

    const tabs = [TestTwo, TestOne];    
    const title = 'Hello';    
</script>

或者

<script setup>    
    const tabs = [TestTwo, TestOne];    
    const title = 'Hello';    
</script>  
<script>    
    import TestOne from './components/TestOne.vue'    
    import TestTwo from './components/TestTwo.vue'    

    export default {    
        components: {    
            TestOne,    
            TestTwo    
        }  
    }    
</script>

vue動態(tài)組件component:is的使用？

vue 動態(tài)組件用于實現(xiàn)在指定位置上，動態(tài)加載不同的組件，核心代碼為：

<component :is="componentTag"></component>
data() {
    return {
        componentTag: '',
    }
}

componentTag 為自定義的變量，將需要加載的組件名賦值給它，即可在<component />標簽出現(xiàn)的位置，渲染該組件。

這個是vue的組件，is=要渲染的組件，不會更新路由，不會更新初始化函數(shù)mounted和created。

刷新頁面后會跳回默認顯示頁面；

缺點

需要引入所有要顯示的組件，并且components:{聲明}

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue如何動態(tài)生成andv圖標
這篇文章主要介紹了vue如何動態(tài)生成andv圖標問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue表單控件綁定圖文詳解
在本文中我們給大家整理了一篇關(guān)于Vue表單控件綁定的相關(guān)知識點內(nèi)容，有需要的朋友們參考下。
2019-02-02
Vue數(shù)組更新及過濾排序功能
Vue為了增加列表渲染的功能，增加了一組觀察數(shù)組的方法，而且可以顯示一個數(shù)組的過濾或排序的副本。本文將詳細介紹Vue數(shù)組更新及過濾排序
2017-08-08
使用vue的transition完成滑動過渡的示例代碼
這篇文章主要介紹了使用vue的transition完成滑動過渡的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動態(tài)合并方式
這篇文章主要介紹了vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動態(tài)合并方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-02-02
Vue如何更改表格中的某一行選項值
這篇文章主要介紹了Vue如何更改表格中的某一行選項值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
前端在el-dialog中嵌套多個el-dialog代碼實現(xiàn)
最近使用vue+elementUI做項目,使用過程中很多地方會用到dialog這個組件,有好幾個地方用到了dialog的嵌套,下面這篇文章主要給大家介紹了關(guān)于前端在el-dialog中嵌套多個el-dialog代碼實現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2024-01-01
vue項目Luckysheet的使用
這篇文章主要介紹了vue項目Luckysheet的使用,目前Luckysheet不支持使用npm安裝包，所以只能使用CDN引入依賴，在vue項目的public/index.html文件里引入即可，本文通過示例代碼給大家詳細介紹，需要的朋友可以參考下
2022-08-08
淺談Vue中render中的h箭頭函數(shù)
今天小編就為大家分享一篇淺談Vue中render中的h箭頭函數(shù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
基于form-data請求格式詳解
今天小編就為大家分享一篇基于form-data請求格式詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10