vue动态组件--------eg:tabs切换

通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现

<template>
<div>
  <component :is="comp"></component>
  <button type="button" @click="change('A')">Vue</button>
  <button type="button" @click="change('B')">HTML</button>
  <button type="button" @click="change('C')">JavaWeb</button>
</div>
</template>
 
<script>
import comA from "@/components/comA";//组件comA对应页面内容
import comB from "@/components/comB";
import comC from "@/components/comC";
export default {
  name: "DynamicComponents",
  data(){
    return {
      comp:'comA'
    }
  },
  methods:{
      change(value){
        this.comp = 'com' + value
      }
  },
  components:{
    comA,
    comB,
    comC
  }
}
</script>
<style scoped></style>

实现效果类似：

参考文档：

https://blog.csdn.net/hssjsh/article/details/127455195