收录网站工具站长工具服务器查询

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

vue 中 component组件 is属性

 功能描述 

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

vue2版

<template><!-- 标签数据 --><!-- uview-ui 标签组件 --><u-tabsclass="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'breakcase 2:currentCompName = 'CompC'breakdefault:currentCompName = 'CompA'}return currentCompName},},methods: {toggle(index) {this.tabsCurrent = index},},
}
</script>

vue3版

<template><!-- 标签数据 --><!-- uview-ui 标签组件 --><u-tabsclass="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-tabsclass="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>