当前位置：首页 > VUE

vue动态组件实现

2026-01-08 14:31:48VUE

Vue 动态组件实现方法

使用 `component` 标签与 `is` 属性

通过 Vue 内置的 <component> 标签和 is 属性实现动态组件切换。is 的值可以是已注册的组件名或导入的组件对象。

<template>
  <component :is="currentComponent"></component>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  components: {
    ComponentA,
    ComponentB
  }
}
</script>

动态切换组件逻辑

通过方法或计算属性控制 currentComponent 的切换，结合按钮或事件触发。

<template>
  <button @click="toggleComponent">切换组件</button>
  <component :is="currentComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      showA: true
    }
  },
  computed: {
    currentComponent() {
      return this.showA ? 'ComponentA' : 'ComponentB'
    }
  },
  methods: {
    toggleComponent() {
      this.showA = !this.showA
    }
  }
}
</script>

保持组件状态（`keep-alive`）

用 <keep-alive> 包裹动态组件可保留其状态，避免重复渲染。

<template>
  <keep-alive>
    <component :is="currentComponent"></component>
  </keep-alive>
</template>

动态加载异步组件

结合 defineAsyncComponent 实现按需加载，优化性能。

import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
)

export default {
  components: {
    AsyncComponent
  }
}

传递 Props 和监听事件

动态组件仍可正常接收 Props 和触发事件。

vue动态组件实现

<template>
  <component 
    :is="currentComponent" 
    :propName="value"
    @customEvent="handleEvent"
  ></component>
</template>

适用场景

标签页切换
条件渲染不同UI模块
根据权限显示不同组件
动态表单字段渲染

标签: 组件动态

分享给朋友：

vue实现水印组件

Vue 水印组件的实现方法使用Canvas绘制水印在Vue组件中通过Canvas动态生成水印图案，将其作为背景添加到目标元素上。 <template> <div ref="…

react如何刷新组件

刷新 React 组件的常见方法使用状态更新触发重新渲染通过修改组件的状态（state），React 会自动触发重新渲染。例如： const [count, setCount] = useSta…

vue 滑杆组件实现

实现基础滑杆组件使用Vue的v-model和原生<input type="range">实现基础功能： <template> <div> <i…

vue实现图片组件

Vue 实现图片组件的方法基础图片组件实现创建一个基础的图片组件，支持动态传入图片路径和替代文本。在Vue项目中新建一个ImageComponent.vue文件： <template>…

vue实现轮播组件

使用Swiper实现轮播组件 Swiper是一个流行的开源轮播库，支持Vue集成。安装Swiper和Vue相关依赖： npm install swiper vue-awesome-swiper 引入…

vue实现组件化

Vue 组件化实现方法组件定义使用 .vue 单文件组件格式，包含 <template>、<script> 和 <style> 三个部分： <templ…

vue动态组件实现