vue3 setup语法糖中使用component动态组件

最新推荐文章于 2025-10-31 08:53:14 发布

原创最新推荐文章于 2025-10-31 08:53:14 发布 · 7.4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue

该博客展示了如何在Vue应用中使用v-for指令动态渲染按钮，并通过点击切换不同组件。利用reactive和shallowReactive管理状态，实现组件（home、about、capage）的条件渲染。同时，通过绑定click事件更新当前选中标签，从而实现内容的动态切换。

<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>

··