Vue <component> 实现组件动态加载

动态组件

Vue 提供内置的<component>标签，来实现动态组件的渲染。

is 属性

<component>中is属性表示动态组件需要渲染的具体组件名称。

示例

注意：动态组件切换时，每次都会销毁旧的组件和创建新的组件，都需要走完整生命周期。

<template>
  <div>
    <component is="FakeComA"></component>

    <component :is="componentName"></component>

    <button @click="componentName = 'FakeComB'">切换组件</button>
  </div>
</template>

<script>
import FakeComA from "@/components/FakeComA";
import FakeComB from "@/components/FakeComB";

export default {
  name: "DynamicComponent",
  components: {FakeComB, FakeComA},
  data: () => {
    return {
      componentName: "FakeComA"
    }
  },

}
</script>