vue动态组件

vue动态组件

通过 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){thisp = 'com' + value}},components:{comA,comB,comC}
}
</script>
<style scoped></style>

实现效果类似：

参考文档：