vue2.0的学习笔记，子组件修改父组件的值踩坑

最新推荐文章于 2024-10-24 21:56:26 发布

阿拉蕾～

最新推荐文章于 2024-10-24 21:56:26 发布

阅读量1.7k

点赞数

分类专栏：移动端文章标签： vue

本文链接：https://blog.csdn.net/baidu_28177789/article/details/84995915

版权

Vue2.0后，直接在子组件修改父组件的值会报错，推荐使用props的单向数据流。通过在子组件中创建新变量并绑定父组件值，然后通过事件触发父组件的方法来更新值。具体步骤包括在子组件中通过props接收值，定义新变量，编写事件触发父组件的函数，父组件则通过事件回调接收并更新数据。

摘要由CSDN通过智能技术生成

Vue1.0升级至2.0之后，直接在子组件修改父组件的值是会报错的目的是为了阻止子组件影响父组件的数据

报错警告：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated:

直接在子组件修改父组件的值是不支持的。

子组件

用props来接收父组件的值：

props:{
   
    ratings: {
   //评价
      type: Array,
      default() {
   
        return [];
      }
    },
    selectType:{
   //选择的评价类型
      type: Number,
      default: ALL
    },
    onlyContent:{
   //是否是勾选，只看内容评价
      type: Boolean,
      default: false
    },
    desc: {
   
      type