快捷導(dǎo)航

vue、uniapp實(shí)現(xiàn)組件動(dòng)態(tài)切換效果

更新時(shí)間：2023年10月11日 09:28:22 作者：我總是詞不達(dá)意

在Vue中，通過使用動(dòng)態(tài)組件，我們可以實(shí)現(xiàn)組件的動(dòng)態(tài)切換，從而達(dá)到頁面的動(dòng)態(tài)展示效果，這篇文章主要介紹了vue、uniapp實(shí)現(xiàn)組件動(dòng)態(tài)切換,需要的朋友可以參考下

功能描述

例如：有多個(gè)tabs標(biāo)簽，如：推薦、熱點(diǎn)、視頻等。用戶點(diǎn)擊標(biāo)簽就會(huì)切換到對(duì)應(yīng)組件

vue2版

<template>
	<!-- 標(biāo)簽數(shù)據(jù) -->
	<!-- uview-ui 標(biāo)簽組件 -->
	<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>
	<!-- 標(biāo)簽數(shù)據(jù) -->
	<!-- uview-ui 標(biāo)簽組件 -->
	<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>
	<!-- 標(biāo)簽數(shù)據(jù) -->
	<!-- uview-ui 標(biāo)簽組件 -->
	<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實(shí)現(xiàn)組件動(dòng)態(tài)切換的文章就介紹到這了,更多相關(guān)vue uniapp組件動(dòng)態(tài)切換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: