VueJS中通过Props传递对象：按引用传递还是深度拷贝？

首先直接给你答案：当你把Vue实例data中的JavaScript对象作为prop传给子组件时，是按引用传递的，Vue不会自动对这个对象做深度拷贝。

为什么是引用传递？ #

这其实是JavaScript本身的特性——对象和数组属于引用类型，它们在内存中存储的是指向实际数据的地址。Vue在处理prop传递时，只是把这个地址值传给了子组件，并没有复制整个对象的结构。所以如果子组件里不小心修改了这个对象的属性（比如this.tableObject.columns.push(...)），父组件data里的原对象也会跟着变化，因为它们指向的是同一块内存空间。

不能用Vuex的情况下，怎么处理？ #

既然你项目没法用NodeJS（也就没法用Vuex这类依赖npm的状态管理工具），可以根据你的需求选择下面的方案：

• 如果子组件只需要展示数据，不需要修改：
  那直接用传递过来的prop就行，但要注意别在子组件里直接修改prop的属性（违反Vue的单向数据流规范），如果不小心改了，父组件的数据也会被影响。

• 如果子组件需要修改数据但不想影响父组件：
  可以在子组件内部对prop做一次深度拷贝，把拷贝后的对象存在子组件自己的data里，之后操作这个本地副本：

  // 子组件代码示例
  export default {
    props: ['tableObject'],
    data() {
      return {
        localTable: null
      }
    },
    created() {
      // 用JSON方法做深度拷贝（注意：如果对象里有函数、Symbol、循环引用，这个方法会失效）
      this.localTable = JSON.parse(JSON.stringify(this.tableObject));
    },
    // 监听父组件传来的prop变化，同步更新本地副本
    watch: {
      tableObject: {
        deep: true,
        handler(newVal) {
          this.localTable = JSON.parse(JSON.stringify(newVal));
        }
      }
    }
  }
  

  如果你的对象里包含函数或者循环引用，JSON方法就不适用了，这时候可以自己写一个递归的深拷贝函数：

  function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') return obj;
    if (obj instanceof Date) return new Date(obj);
    if (obj instanceof Array) return obj.map(item => deepClone(item));
    // 处理普通对象
    const clonedObj = {};
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        clonedObj[key] = deepClone(obj[key]);
      }
    }
    return clonedObj;
  }
  

  之后在子组件里用这个函数代替JSON方法就行。

• 如果需要子组件修改后同步到父组件：
  遵循Vue的单向数据流规范，子组件不要直接修改prop，而是通过$emit触发父组件的方法，由父组件来修改原数据：

  // 子组件里触发事件
  this.$emit('update-table', modifiedData);
  
  // 父组件里监听事件并更新
  <dynamic-table :table-object="objTable" @update-table="handleUpdateTable"></dynamic-table>
  
  // 父组件的方法
  methods: {
    handleUpdateTable(newData) {
      // 这里可以直接修改objTable，或者做其他处理
      this.objTable = deepClone(newData);
    }
  }
  

内容的提问来源于stack exchange，提问作者Ruttyj