当前位置：首页 > VUE

vue 动态组件实现

2026-03-29 17:18:34VUE

Vue 动态组件实现方法

Vue 的动态组件功能通过 <component> 标签和 is 属性实现，允许根据条件或用户交互切换不同的组件。

基本用法

使用 <component :is="currentComponent"> 语法，currentComponent 可以是一个已注册的组件名或组件选项对象：

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

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

export default {
  components: { ComponentA, ComponentB },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}
</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>
  <component :is="currentComponent"></component>
</keep-alive>

传递 Props 和事件

动态组件可以像普通组件一样接收 props 和触发事件：

<component 
  :is="currentComponent" 
  :someProp="data"
  @customEvent="handleEvent"
></component>

高级用法：组件对象

可以直接使用组件对象而非字符串名称：

vue 动态组件实现

data() {
  return {
    currentComponent: {
      template: '<div>动态模板</div>'
    }
  }
}

注意事项

动态组件名称需在 components 选项中注册
动态切换组件时，默认会销毁旧组件实例
大量动态组件切换可能影响性能，需合理使用 keep-alive
组件名需使用 kebab-case（如 my-component）或 PascalCase（如 MyComponent）

标签: 组件动态

分享给朋友：

vue轮播组件实现

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

vue 实现组件刷新

组件局部刷新在Vue中实现组件刷新可以通过强制重新渲染组件来实现。常用的方法有以下几种：使用v-if指令通过切换v-if条件触发组件的销毁和重建 <template> <…

vue表格组件实现

Vue表格组件实现基础表格实现使用el-table组件实现基础表格功能。安装Element UI后，引入el-table和el-table-column组件。 <template>…

vue组件实现vmodel

Vue 组件实现 v-model 在 Vue 中，v-model 是双向数据绑定的语法糖，默认情况下绑定 value 属性并监听 input 事件。在自定义组件中实现 v-model 需要正确配置 p…

vue实现头像组件

Vue 头像组件实现基础实现创建一个可复用的头像组件，支持图片链接或文字缩写显示： <template> <div class="avatar" :style="ava…

vue实现组件拖动

Vue 实现组件拖动的几种方法使用 HTML5 拖放 API HTML5 原生提供了拖放 API，可以通过 draggable 属性实现基础拖拽功能。在 Vue 中可以通过事件绑定实现交互逻辑。…

vue 动态组件实现