vue3 component is 不顯示的問(wèn)題及解決
更新時(shí)間：2024年03月15日 09:31:55 作者：MAIMIHO
這篇文章主要介紹了vue3 component is 不顯示的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue3 component is 不顯示
原因
通過(guò)名稱傳遞必須先對(duì)其進(jìn)行注冊(cè), 將組件本身傳遞給 is 而不是其名稱，則不需要注冊(cè)
<script>
import { Transition, TransitionGroup } from 'vue'
export default {
components: {
Transition,
TransitionGroup
}
}
</script>
<template>
<component :is="isGroup ? 'TransitionGroup' : 'Transition'">
...
</component>
</template>
setup 寫(xiě)法
<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動(dòng)態(tài)組件component:is的使用？
vue 動(dòng)態(tài)組件用于實(shí)現(xiàn)在指定位置上，動(dòng)態(tài)加載不同的組件，核心代碼為：
<component :is="componentTag"></component>
data() {
return {
componentTag: '',
}
}componentTag 為自定義的變量，將需要加載的組件名賦值給它，即可在<component />標(biāo)簽出現(xiàn)的位置，渲染該組件。
這個(gè)是vue的組件，is=要渲染的組件，不會(huì)更新路由，不會(huì)更新初始化函數(shù)mounted和created。
刷新頁(yè)面后會(huì)跳回默認(rèn)顯示頁(yè)面；
缺點(diǎn)
需要引入所有要顯示的組件，并且components:{聲明}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(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)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-08-08
這篇文章主要介紹了vue實(shí)現(xiàn)登錄攔截，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
簡(jiǎn)易vuex4核心原理及實(shí)現(xiàn)源碼分析
這篇文章主要為大家介紹了簡(jiǎn)易vuex4核心原理及實(shí)現(xiàn)源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
vue如何點(diǎn)擊多個(gè)tab標(biāo)簽打開(kāi)關(guān)閉多個(gè)頁(yè)面
這篇文章主要介紹了vue如何點(diǎn)擊多個(gè)tab標(biāo)簽打開(kāi)關(guān)閉多個(gè)頁(yè)面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue聲明式導(dǎo)航與編程式導(dǎo)航示例分析講解
這篇文章主要介紹了Vue中聲明式導(dǎo)航與編程式導(dǎo)航，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-11-11
這篇文章主要給大家介紹了關(guān)于vue過(guò)濾器filter的使用方法,Vue.js的過(guò)濾器(Filter)是一種可重用的功能,用于對(duì)文本進(jìn)行格式化,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
Vue3?實(shí)現(xiàn)一個(gè)自定義toast?小彈窗功能
這篇文章主要介紹了Vue3?實(shí)現(xiàn)一個(gè)自定義toast?小彈窗,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
這篇文章主要給大家介紹了關(guān)于Vue中常用的鼠標(biāo)移入移出事件的相關(guān)資料,鼠標(biāo)移入移出事件在 Vue 中可以通過(guò)@mouseenter和@mouseleave來(lái)綁定,需要的朋友可以參考下2023-07-07
vite+vue3+ts項(xiàng)目中提示無(wú)法找到模塊的問(wèn)題及解決
這篇文章主要介紹了vite+vue3+ts項(xiàng)目中提示無(wú)法找到模塊的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue+epubjs實(shí)現(xiàn)電子書(shū)閱讀器的基本功能
這篇文章主要為大家詳細(xì)介紹了如何使用vue+epubjs實(shí)現(xiàn)電子書(shū)閱讀器的基本功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11