vue多个组件实现切换

最新推荐文章于 2024-06-02 18:45:43 发布

Rouqier

最新推荐文章于 2024-06-02 18:45:43 发布

阅读量1.1k

点赞数

分类专栏： vue.js 文章标签： vue.js elementui sass

本文链接：https://blog.youkuaiyun.com/Rouqier/article/details/121747266

版权

本文探讨了在Vue.js中如何使用装饰器和传统方式实现组件切换，包括详细介绍了两种不同的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.装饰器的写法

<template>
  <div class="home">
    <ElButton v-for="item in info" :key="item.name" @click="form(item.value)">
        {
  {item.name}}
    </ElButton>

    <Component :is="componentShow" />
  </div>
</template>

<script>
import { Component, Vue } from "vue-property-decorator";
import FormDemo from "../components/formDemo"; // 引入组件1
import Cartogram from "../components/cartogram"; //引入组件2

@Component({
  components: {
    FormDemo,
    Cartogram,
  },
})
export default class TheHome extends Vue {
  componentShow = null;

  info = [
    { name: "表单", value: FormDemo },
    { name: "统计", value: Cartogram },
  ];
        
   // 切换的方法
  form(val) {
    this.componentShow = val; //把组件名赋值给公用组件
  }
}
</script>