Vue 动态组件的理解

什么是动态组件

让多个组件使用同一个挂载点，并动态切换，这就是动态组件

<template>
  <div>
     <div>动态渲染组件</div>
     <div>
     //component标签就是挂载点,  :is=绑定的组件名字
       <component :is="currentComponent"></component>
     </div>
     <button @click="btn_click()">按钮</button>
  </div>
</template>

<script>
import Tab0 from "@/components/Tab0.vue";
import Tab1 from "@/components/Tab1.vue";
export default {
  name:'About',
  data(){
    return{
      currentIndex:0
    }
  },
  components:{
    Tab0,
    Tab1
  },
  methods:{
    btn_click(){
      if(this.currentIndex==0){
        this.currentIndex=1
      }else{
        this.currentIndex = 0
      }
    }
  },
  computed:{
    currentComponent:function(){
      return `Tab${this.currentIndex}`
    }
  }
}
</script>

每次切换都是生成新的组件,如果用keep-alive包裹,就可以提高性能,前提是大项目!相对提升性能