当前位置：首页 > 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 的切换，结合按钮或事件触发。

vue动态组件实现

<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> 包裹动态组件可保留其状态，避免重复渲染。

vue动态组件实现

<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 和触发事件。

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

适用场景

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

标签: 组件动态

分享给朋友：

vue实现动态禁用

动态禁用表单元素或按钮在Vue中实现动态禁用功能通常通过v-bind:disabled（或简写为:disabled）绑定一个响应式变量实现。当变量值为true时，元素被禁用；为false时启用。…

vue轮播组件实现

Vue 轮播组件实现方法使用第三方库（如 Swiper）安装 Swiper 库： npm install swiper 在 Vue 组件中引入 Swiper： <template…

vue穿梭框组件实现

实现 Vue 穿梭框组件的基本思路穿梭框（Transfer）组件通常用于在两个列表之间移动数据项。核心功能包括左侧列表、右侧列表、移动按钮（左移、右移、全选等）以及数据项的渲染与交互。基础结构设…

组件elementui

ElementUI 简介 ElementUI 是一套基于 Vue.js 的桌面端组件库，由饿了么前端团队开发并开源。它提供了丰富的 UI 组件（如按钮、表单、表格等），适合快速构建企业级中后台产品。…

react如何删除组件

删除 React 组件的几种方法条件渲染法通过状态控制组件是否渲染。当状态为 false 时，组件会被移除： const [showComponent, setShowComponent] =…

vue实现递归组件

递归组件的实现方法在Vue中实现递归组件主要依靠组件调用自身的能力。以下是几种常见的实现方式：使用组件name属性通过组件的name属性实现递归调用是最简单的方式： <template…

vue动态组件实现