Component: is to switch between multiple components

component :is Switch between multiple components

Parent component

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

Child components

<template>
  <div>
  </div>
</template>
<script>
export default {
    
  props: {
    
    id: {
    
      type: String,
      default: "",
    },
  data() {
    
    return {
    
    }
  },
  mounted() {
    
  },
  methods: {
    
    init() {
    
      this.getData();// Call interface to get data 
    },
  },
}
</script>