component :is 实现多个组件之间的切换

component :is 实现多个组件之间的切换

父组件

<template>
  <div>
     <div
        :class="{ active: index === activeIndex }"
        v-for="(item, index) in menuList"
        :key="item.name"
        @click="tabChange(index, item.name)"
      >
        {{ item.name }}
      </div>
    </div>
    <component
      :is="menuActive"
      :id="id"
      :ref="menuActive"
    ></component>
  </div>
</template>
<script>
import A from "./components/a";
import B from "./components/b";
import C from "./components/C";
export default {
  components: { A, B, C},
  data() {
    return {
    	id:undefined,
    	menuActive: "",
    	menuList:[
    	{name:'A',component:'A'},
    	{name:'B',component:'B'},
    	{name:'C',component:'C'},
    	]
    }
  },
  mounted() {
    this.tabChange(0);
  },
  methods: {
    tabChange(index, item) {
      this.menuActive = this.menuList[index].component;
      setTimeout(() => {
        this.$refs[this.menuActive].init();
      }, 20);
    },
  },
}
</script>

子组件

<template>
  <div>
  </div>
</template>
<script>
export default {
  props: {
    id: {
      type: String,
      default: "",
    },
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
    init() {
      this.getData();//调用接口获取数据
    },
  },
}
</script>