如何传入不同props复用Vue组件且各实例配置互不干扰

算力阿峰

2026-10-7

问题原因与解决方案

你遇到的配置互相干扰的问题本质是两个组件实例共享了同一份引用类型的配置数据，或者Vue复用了同一个组件实例，按以下步骤排查修改即可解决：

第一步：给两个dynamicTable组件添加唯一的key属性，阻止Vue复用同一个组件实例
父组件代码修改后如下：

<template>
 <div>
   <dynamicTable key="mainTable" :config="config"></dynamicTable>

   <el-dialog title="modal" :visible.sync="modal">
      <dynamicTable key="modalTable" :config="modal_config"></dynamicTable>
   </el-dialog>
 </div>
</template>

第二步：检查dynamicTable组件内部逻辑，不要直接修改传入的config prop，也不要将配置存储在组件外部的公共变量中
如果你需要在组件内部修改配置，需要深拷贝prop得到组件独立的内部副本，示例代码如下：

// dynamicTable 组件内部逻辑
export default {
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 深拷贝得到独立的配置副本，内部修改不会影响外部源数据
      innerConfig: JSON.parse(JSON.stringify(this.config))
    }
  },
  watch: {
    // 如果父组件的配置会动态更新，添加监听器同步内部副本
    config: {
      handler(newVal) {
        this.innerConfig = JSON.parse(JSON.stringify(newVal))
      },
      deep: true
    }
  }
}