广西新农村建设工作专题网站,wordpress目录主题,商务网站建设步骤,山东网络科技有限公司在Vue中#xff0c;通过使用动态组件#xff0c;我们可以实现组件的动态切换#xff0c;从而达到页面的动态展示效果。 vue 中 component组件 is属性 功能描述 例如#xff1a;有多个tabs标签#xff0c;如#xff1a;推荐、热点、视频等。用户点击标签就会切换到对应组… 在Vue中通过使用动态组件我们可以实现组件的动态切换从而达到页面的动态展示效果。 vue 中 component组件 is属性 功能描述
例如有多个tabs标签如推荐、热点、视频等。用户点击标签就会切换到对应组件 vue2版
template!-- 标签数据 --!-- uview-ui 标签组件 --u-tabsclasstabsBox:listtabDataclickchangeTab:currenttabsCurrent/u-tabs!-- 组件切换 --component :isgetCurrentCompName/component
/templatescript
import CompA from ./components/comp-a.vue
import CompB from ./components/comp-b.vue
import CompC from ./components/comp-c.vueexport default {data() {return {tabsCurrent: 0,tabsList: [],}},computed: {getCurrentCompName() {let currentCompName switch (this.tabsCurrent) {case 1:currentCompName CompBbreakcase 2:currentCompName CompCbreakdefault:currentCompName CompA}return currentCompName},},methods: {toggle(index) {this.tabsCurrent index},},
}
/script
vue3版
template!-- 标签数据 --!-- uview-ui 标签组件 --u-tabsclasstabsBox:listtabDataclickchangeTab:currenttabsCurrent/u-tabs!-- 组件切换 --component :isgetCurrentCompName/component
/templatescript 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-tabsclasstabsBox:listtabDataclickchangeTab:currenttabsCurrent/u-tabs!-- 组件切换 --component :iscurrentComp/component
/templatescript 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
