props 子组件更改父组件引用类型的问题

1. 传递引用类型引发的问题

vue开发中，我们向子组件传递一个引用类数据[Array/Object]作为子组件的初始值 ，

现在我的结构是这样的 父组件（father）下面有两个子组件child1,child2

在通过props把数组类型同一个值传递给child1,child2,当我们通过child2来更改props的值时（原则上子组件不可以改变父组件传递过来的props值，如果时基本类型会报错），更改后父组件也会相应变化，父组件变化了相应的子组件也发生了变化，所以当点击child2修改值时，把father组件的值更改了，从而也改变了child1的值，下面会讲到如何来解决这个问题？

父组件father

<template>
   <div>
      <h2>孩子1</h2>
      <child1 :testArr="testObj.testArr"></child1>
      <hr>
      <h2>孩子2</h2>
      <child2 :testArr="testObj.testArr"></child2>

      <hr>

   </div>
</template>

<script>
import Child1 from './demo/Child1'
import Child2 from './demo/Child2'

export default {
  data(){
    return {
      testObj:{
        require:true,
        testArr:[
          {
            id:1,
            name:"张三"
          },
           {
            id:2,
            name:"赵四"
          }
        ]
      }
    }
  },
  components:{
    Child1,
    Child2
  }
}
</script>

<style>

</style>

子组件Child1

<template>
   <div class="child1">
       <div v-for="(item,index) in testArr" :key="index">{{item.id}}---{{item.name}}</div>
   </div>
</template>

<script>
export default {
  props:{
      testArr:Array
  }
}
</script>

<style>

</style>

子组件child2

<template>
   <div class="child2">
       <div v-for="(item,index) in testArr" :key="index">{{item.id}}---{{item.name}}</div>
       <button @click="changeName">点击改变数组第一个的值</button>
   </div>
</template>

<script>
export default {
  props:{
      testArr:Array
  },
  methods:{
      changeName() {
          this.testArr[1].name="花花";
      }
  }
}
</script>

<style>

</style>

当点击child2修改值时，把father组件的值更改了，从而也改变了child1的值

怎么解决这个问题？

可以把props传过来的数据保存在data里面，注意要深拷贝

错误写法

 data(){
      return {
          testData:this.testArr
      }
  }

深拷贝代码参考

// 递归实现一个深拷贝
function deepClone(source) {
  if (!source || typeof source !== 'object') {
    throw new Error('error arguments', 'shallowClone');
  }
  var targetObj = source.constructor === Array ? [] : {};
  for (var keys in source) {
    if (source.hasOwnProperty(keys)) {
      if (source[keys] && typeof source[keys] === 'object') {
        targetObj[keys] = source[keys].constructor === Array ? [] : {};
        targetObj[keys] = deepClone(source[keys]);
      } else {
        targetObj[keys] = source[keys];
      }
    }
  }
  return targetObj;
}
　　

但是这种情况下父组件改变参数时，子组件无法更新参数，需要时可以通过watch或者computed来实现实时更新

先来一种不是深拷贝的赋值，错误写法

注意：用watch监听时，第一次时不会执行的，后面值改变了才会执行，所以要换一种写法

  data() {
    return {
        testData:[]
    }
  },

  watch:{
      testArr(newValue){
          this.testData=newValue
      } 
  }

不是深拷贝的赋值，正确写法

watch: {
    testArr: {
      handler(newValue, lodValue) {
        this.testData = newValue;
      },
      immediate: true  //代表在watch生命了testArr这个方法之后会立即去执行handler方法，自己理解，初次改变会执行这个方法
    }
  }

上面的这种写法 还是会出现更改了child2从而改变child1的值，刚说的用深拷贝就不会出现这种问题了

深拷贝错误写法

报错：vue.runtime.esm.js?2b0e:1888 ReferenceError: deepClone is not defined

当watch监听到testArr变化时，可能method里面的方法我们还访问不到，所以不要写在method方法里面，我们可以在外面定义一个文件，然后在里面引入

  watch: {
    testArr: {
      handler(newValue, lodValue) {
        this.testData = this.deepClone(newValue);
      },
      immediate: true  //代表在watch生命了testArr这个方法之后会立即去执行handler方法，自己理解，初次改变会执行这个方法
    }
  },
  methods: {
    changeName() {
      this.testData[1].name = "花花";
    },
    // 递归实现一个深拷贝
    deepClone(source) {
      if (!source || typeof source !== "object") {
        throw new Error("error arguments", "shallowClone");
      }
      var targetObj = source.constructor === Array ? [] : {};
      for (var keys in source) {
        if (source.hasOwnProperty(keys)) {
          if (source[keys] && typeof source[keys] === "object") {
            targetObj[keys] = source[keys].constructor === Array ? [] : {};
            targetObj[keys] = deepClone(source[keys]);
          } else {
            targetObj[keys] = source[keys];
          }
        }
      }
      return targetObj;
    }
  }

正确写法

utils.js文件

export function  deepClone(source) {
    if (!source || typeof source !== "object") {
      throw new Error("error arguments", "shallowClone");
    }
    var targetObj = source.constructor === Array ? [] : {};
    for (var keys in source) {
      if (source.hasOwnProperty(keys)) {
        if (source[keys] && typeof source[keys] === "object") {
          targetObj[keys] = source[keys].constructor === Array ? [] : {};
          targetObj[keys] = deepClone(source[keys]);
        } else {
          targetObj[keys] = source[keys];
        }
      }
    }
    return targetObj;
  }

在需要用到函数的地方引入,然后直接用就可以了

import {deepClone} from './demo/utils.js'

child2最后代码

<template>
  <div class="child2">
    <div v-for="(item,index) in testData" :key="index">{{item.id}}---{{item.name}}</div>
    <button @click="changeName">点击改变数组第一个的值</button>
  </div>
</template>

<script>
import { deepClone } from "./utils.js";
export default {
  props: {
    testArr: Array
  },
  data() {
    return {
      testData: []
    };
  },

  watch: {
    testArr: {
      handler(newValue, lodValue) {
        this.testData = deepClone(newValue);
      },
      immediate: true  //代表在watch生命了testArr这个方法之后会立即去执行handler方法，自己理解，初次改变会执行这个方法
    }
  },
  methods: {
    changeName() {
      this.testData[1].name = "花花";
    }
    // 递归实现一个深拷贝
 
  }
};
</script>

<style>
</style>

现在点击child2里面的按钮，更改数据，就不会改到child1的数据了