vue、uniapp实现组件动态切换

在Vue中,通过使用动态组件,我们可以实现组件的动态切换,从而达到页面的动态展示效果。

vue 中 component组件 is属性

功能描述

例如:有多个tabs标签,如:推荐、热点、视频等。用户点击标签就会切换到对应组件

vue2版

html 复制代码
<template>
	<!-- 标签数据 -->
	<!-- 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版

html 复制代码
<template>
	<!-- 标签数据 -->
	<!-- 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>

或者

html 复制代码
<template>
	<!-- 标签数据 -->
	<!-- 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>
相关推荐
yinke小琪6 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿10 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux11 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵13 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆15 分钟前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
豆苗学前端18 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
不见_18 分钟前
不想再写周报了?来看看这个吧!
前端·命令行
yinke小琪20 分钟前
JavaScript 事件冒泡与事件捕获
前端·javascript
pany22 分钟前
写代码的节奏,正在被 AI 改写
前端·人工智能·aigc
liliangrong77725 分钟前
ES2025新特性详解
前端