其实这就是Vue的单向数据流的概念,因为识别到子组件中修改了props值。

单向数据流

父组件通过props将数据的更新向下流动到子组件中,子组件中所有的 props 都将会实时更新为最新值。
但是反过来则不行。不应该在子组件内部修改定义好的props。
这是Vue防止从子组件意外变更新父级组件的状态内容,这样会导致你应用的数据流向杂乱无章。


解决如题报错的方式有两种情形:

①props 用来传递一个初始值,子组件接下来希望将其作为一个本地的变量来使用。在子组件内的data中定义一个变量,并将接收的props当作其初始值:

props: ['count'],
data() {
  return {
    localCount: this.count
  }
}


②如果依赖该props进行计算/转换,可以定义一个计算属性

props: ['count'],
computed: {
  calc() {
    return 'count-' + this.count
  }
}



注意:

  在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。



参考:https://blog.csdn.net/weixin_46242909/article/details/114012729

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐