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)文章
關(guān)于vue.extend和vue.component的區(qū)別淺析
最近工作中遇到了vue.extend,vue.component，但二者之間的區(qū)別與聯(lián)系是什么呢？下面這篇文章主要給大家介紹了關(guān)于vue.extend和vue.component區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
這篇文章主要介紹了vue實現(xiàn)登錄攔截，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家介紹了簡易vuex4核心原理及實現(xiàn)源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了vue如何點擊多個tab標簽打開關(guān)閉多個頁面，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue聲明式導(dǎo)航與編程式導(dǎo)航示例分析講解
這篇文章主要介紹了Vue中聲明式導(dǎo)航與編程式導(dǎo)航，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11
這篇文章主要給大家介紹了關(guān)于vue過濾器filter的使用方法,Vue.js的過濾器(Filter)是一種可重用的功能,用于對文本進行格式化,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue3?實現(xiàn)一個自定義toast?小彈窗,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章主要給大家介紹了關(guān)于Vue中常用的鼠標移入移出事件的相關(guān)資料,鼠標移入移出事件在 Vue 中可以通過@mouseenter和@mouseleave來綁定,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vite+vue3+ts項目中提示無法找到模塊的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細介紹了如何使用vue+epubjs實現(xiàn)電子書閱讀器的基本功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11