vue、uniapp實現(xiàn)組件動態(tài)切換效果
更新時間:2023年10月11日 09:28:22 作者:我總是詞不達意
在Vue中,通過使用動態(tài)組件,我們可以實現(xiàn)組件的動態(tài)切換,從而達到頁面的動態(tài)展示效果,這篇文章主要介紹了vue、uniapp實現(xiàn)組件動態(tài)切換,需要的朋友可以參考下
在Vue中,通過使用動態(tài)組件,我們可以實現(xiàn)組件的動態(tài)切換,從而達到頁面的動態(tài)展示效果。
vue 中 component組件 is屬性
功能描述
例如:有多個tabs標簽,如:推薦、熱點、視頻等。用戶點擊標簽就會切換到對應(yīng)組件
vue2版
<template> <!-- 標簽數(shù)據(jù) --> <!-- uview-ui 標簽組件 --> <u-tabs class="tabsBox" :list="tabData" @click="changeTab" :current="tabsCurrent" ></u-tabs> <!-- 組件切換 --> <component :is="getCurrentCompName"></component> </template> <script> import CompA from './components/comp-a.vue' import CompB from './components/comp-b.vue' import CompC from './components/comp-c.vue' export default { data() { return { tabsCurrent: 0, tabsList: [], } }, computed: { getCurrentCompName() { let currentCompName = '' switch (this.tabsCurrent) { case 1: currentCompName = 'CompB' break case 2: currentCompName = 'CompC' break default: currentCompName = 'CompA' } return currentCompName }, }, methods: { toggle(index) { this.tabsCurrent = index }, }, } </script>
vue3版
<template> <!-- 標簽數(shù)據(jù) --> <!-- uview-ui 標簽組件 --> <u-tabs class="tabsBox" :list="tabData" @click="changeTab" :current="tabsCurrent" ></u-tabs> <!-- 組件切換 --> <component :is="getCurrentCompName"></component> </template> <script setup> import { ref, reactive, markRaw} from 'vue'; import CompA from './components/comp-a.vue'; import CompB from './components/comp-b.vue'; import CompC from './components/comp-c.vue'; const tabsCurrent = ref(0); const tabsList = ref([]); const getCurrentCompName = () => { let currentCompName = ''; switch (tabsCurrent.value) { case 1: currentCompName = markRaw(CompB); break; case 2: currentCompName = markRaw(CompC); break; default: currentCompName = markRaw(CompA); } return currentCompName; }; const toggle = (index) => { tabsCurrent.value = index; }; </script>
或者
<template> <!-- 標簽數(shù)據(jù) --> <!-- uview-ui 標簽組件 --> <u-tabs class="tabsBox" :list="tabData" @click="changeTab" :current="tabsCurrent" ></u-tabs> <!-- 組件切換 --> <component :is="currentComp"></component> </template> <script setup> import { ref, reactive, markRaw, shallowRef } from 'vue'; import CompA from './components/comp-a.vue'; import CompB from './components/comp-b.vue'; import CompC from './components/comp-c.vue'; const tabsCurrent = ref(0); const tabsList = ref([]); const currentComp = shallowRef(CompA) const toggle = (index) => { tabsCurrent.value = index; switch (index) { case 1: currentComp.value = CompB; break; case 2: currentComp.value = CompC; break; default: currentComp.value = CompA; } }; </script>
到此這篇關(guān)于vue、uniapp實現(xiàn)組件動態(tài)切換的文章就介紹到這了,更多相關(guān)vue uniapp組件動態(tài)切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue-cli如何關(guān)閉Uncaught?error的全屏提示
這篇文章主要介紹了vue-cli如何關(guān)閉Uncaught?error的全屏提示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04Element-Ui組件 NavMenu 導航菜單的具體使用
這篇文章主要介紹了Element-Ui組件 NavMenu 導航菜單的具體使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-10-10