【VUE】父子组件prop数据传递（一）

系统底层框架升级后，前端常报异常：
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

先看一下代码：

<!-- 父组件 -->
<son :father-obj="obj"></son>

<!-- 子组件 -->
<template>
...省略html代码
</template>
<script>
export default {
  props: {
    fatherObj:{
      type: Object,
      default () {
        return {}
      }
  },
  data () {},
  methods: {
    clearFatherObj(){
      this.fatherObj = null
    }
  }
}
</script>

vue官方说明：

在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。

Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。

很明显，代码中clearFatherObj()方法试图直接修改父组件的fatherObj，于是Vue报错了。

找到了原因，那么来改一下代码：

<!-- 父组件 -->
<!-- @clearFatherObj -->
<son :father-obj="obj" @clearFatherObj = "clearFatherObj"></son>
<script>
export default {
  methods: {
    clearFatherObj(){
      this.obj= null
    }
  }
}
</script>

<!-- 子组件 -->
<template>
...省略html代码
</template>
<script>
export default {
  props: {
    fatherObj:{
      type: Object,
      default () {
        return {}
      }
  },
  data () {},
  methods: {
    clearFatherObj(){
      // this.fatherObj = null
      // 通过$emit一个事件通知父组件来更新，父组件调用时必需传入@clearFatherObj
      this.$emit('clearFatherObj', null)
    }
  }
}
</script>

使用$emit通知父组件来操作，问题解决！

除此之外，还有一种代码很难跟踪问题：

<!-- 父组件 -->
<!-- @clearFatherObj -->
<son ref="form" :father-obj="fatherObj" @clearFatherObj = "clearFatherObj"></son>
<script>
export default {
  methods: {
    clearFatherObj(){
      this.$refs.form.fatherObj = null
    }
  }
}
</script>

这看起来没问题啊，数据是在父子件中处理的。但是，还是会报一样的错误。

$refs 是一个直接操作子组件的应急方案,应当避免在模板或计算属性中使用

使用$ref相当于在子组件中操作了。

总的来说，就是子组件没权修改父组件的东西，想要修改怎么办？通知父组件，让它来改吧！

但是，如果传入的数据是Object类型或者array类型，子组件只想要修改它们中的值，Vue还是会睁只眼闭只眼的。例如：

changeFatherObj(){  this.fatherObj.no = 1 }// 这样就不会报错

参考：
https://cn.vuejs.org/v2/guide/components.html
https://www.cnblogs.com/kidsitcn/p/5409994.html