vue出现Avoid mutating a prop directly since the value... 问题解决方案

今天在写一个自己的弹窗组件时候发现一个bug，虽然只是一个警告，但还是想方法解决了下

触发原因

如果你写一个弹窗组件，父亲通过showBottom控制该组件的打开关闭，然后子组件将showBottom改成false，问题就出现了。（这里不用emit的原因是父组件其实没必要在写一个方法去监听这个方法）

vue是不建议通过子组件擅自更改父组件传过来的值的。

会报错：

报错代码如下

父组件

 <cartBottom  v-if='showBottom' :showBottom='showBottom'></cartBottom>

子组件

hiddenBottom() {
  this.showBottom = !this.showBottom; //这里抛出错误
}

解决方法

1. 最简单的方法就是 将showBottom变成一个对象比如 a.showBottom = true,
   然后传到子组件在通过子组件直接a.showBottom=false直接改，这样是不会报错的。
2. 可以通过.sync的特点使用emit(“update:showBottom”,false)将值自动改掉。（双向绑定）

代码如下：

父组件

 <cartBottom  v-if='showBottom' v-bind:showBottom.sync='showBottom'></cartBottom>

子组件

 hiddenBottom() {
      // this.showBottom = !this.showBottom
     this.$emit('update:showBottom',!this.showBottom)
  },

这样就能做到不通过emit绑定事件来将值修改成false。

第二种方法也可以用于父子组件传值之间的互相修改。