vue、uniapp实现组件动态切换效果
作者：我总是词不达意
在Vue中，通过使用动态组件，我们可以实现组件的动态切换，从而达到页面的动态展示效果，这篇文章主要介绍了vue、uniapp实现组件动态切换,需要的朋友可以参考下
在Vue中，通过使用动态组件，我们可以实现组件的动态切换，从而达到页面的动态展示效果。
vue 中 component组件 is属性
功能描述
例如：有多个tabs标签，如：推荐、热点、视频等。用户点击标签就会切换到对应组件
vue2版
<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版
<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>或者
<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>到此这篇关于vue、uniapp实现组件动态切换的文章就介绍到这了,更多相关vue uniapp组件动态切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！