prop的单向数据流

前言

在Vue的子组件中去修改父组件通过prop传过来的对象时，控制台报错，报错信息如下：error Unexpected mutation of “xxxx“ prop，这背后的原因是什么呢，下面我将结合实际开发的报错信息和Vue.js官方文档带大家深入理解prop的单向数据流；

报错原因分析

代码如下所示：

<script>
export default {
  data() {
    return {
      flag: '',
    }
  },
  //props传入的todo使用要加上this
  props: ['todo'],
  methods: {
    changeDone() {
      this.todo.done = this.flag
    },
  },
}
</script>

以上代码中可以看出此组件用props接收了一个todo对象，而我在methods对象中定义了一个函数，直接访问todo对象并且，修改了其中的done属性，导致了控制台报错；首先我们查阅官方文档看看，文档对prop的说明，文档中清楚的说明了prop的单向数据流，强调了父子组件之间形成了一个单向下行绑定；如果在子组件内部更改prop，会导致浏览器报错；

解决办法

对于以上错误，我们已经明确了原因，那么我们如果一定要修改父组件传入的数据，而且不影响父组件呢？下面我们来看看Vue官方文档提供的方法：

以上图片看出Vue官方文档明确了两种变更prop的情形，第一种是在本地的data对象中添加属性，并且将 父组件传入的prop作为初始值；第二种是定义一个计算属性，用传入的prop属性进行计算；
特别强调：注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。
更详细的信息请查看：Vue.js官方文章

写在最后

🥂(❁´◡`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞