子组件未传递数据，父组件数据却改变。 “引用数据类型的‘浅拷贝’”

前言：今天在开发过程中，遇见一个烧脑的问题。感觉有必要记录一下，也给大家分享一下，避免大家踩坑。

一、环境

父组件：展示自己的兴趣标签，可通过子组件修改兴趣标签
子组件：选择【修改】自己的兴趣标签，将选择的数组传递给父组件

1.1 父组件代码

    <select-interest
      v-show="selectInterestVisible"
      :skillList="skillList"
      :ownedSkillIdList="copyGiftList"
      @save="updateOwnedSkillIdList"
      @close="hideSelectInterest"
    ></select-interest>

1.2 子组件代码

<button class="btn btn-save" @click="save">保存</button>
<button class="btn btn-cancel" @click="close">取消</button>

    save() {
      this.$emit("save", this.selectedSkillIdList);
    },
    close() {
      this.$emit("close","");
    },

遇见的问题：
进入子组件选择兴趣后，点击取消按钮，发现刚刚选择的兴趣标签已经传递给父组件，
思考：取消按钮未进行 $emit 传递数据，为什么父组件的数据被更改？？？

二、 结论

通过看文档、查百度，才发现文档中说 注意在 JavaScript 中，对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

什么意思？
原来通过组件传递的值是 “引用类型” 的数据类型时，就会出现这个情况，换句话说，就是 传递引用数据类型就相当于一个 “浅拷贝” 数据的方式

使用深拷贝复制父组件传递的值

    // 深拷贝 - 礼物类型
    copyGiftList(){
      let copyList = [...this.ownedSkillIdList]
      return copyList
    },

惊喜的发现，解决了。。。