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

Vue About 675 words

动态组件

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>
Views: 2,159 · Posted: 2022-12-27

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓

扫描下方二维码关注公众号和小程序↓↓↓


Today On History
Browsing Refresh