vue多个组件实现切换

最新推荐文章于 2024-04-02 05:15:55 发布

VIP文章 Rouqier

最新推荐文章于 2024-04-02 05:15:55 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/Rouqier/article/details/121747266

版权

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>