vue3 setup语法糖中使用component动态组件
vue3 setup语法糖中使用component动态组件。
·
<template>
<!-- <router-view/> -->
<div>
<button v-for="i,index in data.tabs"
:key="index" @click="currentIndex(i)"
:class="{ active: data.currentTab === i}">{{i}}</button>
<component :is="dom[data.currentTab]"></component>
<!-- <template v-if="data.currentTab==='home'">
<home></home>
</template>
<template v-else-if="data.currentTab==='about'">
<about></about>
</template>
<template v-else="data.currentTab==='capage'">
<capage></capage>
</template> -->
</div>
</template>
<script setup>
import {reactive,shallowReactive} from 'vue'
import about from './pages/about.vue';
import home from './pages/home.vue';
import capage from './pages/capage.vue';
const data=reactive({
tabs:['home','capage','about'],
currentTab:'home',
})
const dom=shallowReactive({
home,about,capage
})
function currentIndex(i){
this.data.currentTab=i
}
</script>
<style lang="scss">
.active{
color: aquamarine;
}
</style>
··
更多推荐
所有评论(0)