组件懒加载实现方式二

<template>
  <div class="l1">
    <button @click="changeCom('first')">组件1</button>
    <button @click="changeCom('second')">组件2</button>
    <button @click="changeCom('third')">组件3</button>
    <component :is="getActiveCom"></component>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      a1: () => import("./lazycom/a.vue"),
      b1: () => import("./lazycom/b.vue"),
      c1: () => import("./lazycom/c.vue"),
    };
  },
  methods: {
    changeCom(v) {
      //   console.log(v);
      switch (v) {
        case "first":
          this.getActiveCom = this.a1;
          break;
        case "second":
          this.getActiveCom = this.b1;
          break;
        case "third":
          this.getActiveCom = this.c1;
          break;

        default:
          break;
      }
    },

    


  },

  computed: {
    getActiveCom :{
        get (){
          console.log(22);
           return this.a1;
        },
        set (v){
             this.a1 = v  v是点击时利用setter 将组件传到参数内
              
        }
    }
  },
};
</script>