vue_成功解决 vue 父传子，组件值更改问题

一、问题描述：

vue+springboot前后端分离项目中，一关闭评论弹窗，就报错：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: "drawer"

二、报错原因：父传子，组件值更改问题。

项目中：关闭时，从子组件向父组件请求用用this.$emit("commentClose", false);，然后父组件使用commentClose方法修改isComment的值来让组件显示或者隐藏。但是有些版本的vue不支持子组件直接使用父组件传过来的值，原来我父组件传值drawer，然后子组件直接用了：visible.sync=“drawer”，所以报错了。

三、问题解决:在父组件将数据处理好后再传给子组件；在子组件中定义一个中间变量来接收父组件传来的值，子组件绑定这个中间变量，而不是直接绑定父传来的值。

父组件----userIndex.vue：

 

 子组件---commentIndex.vue：

 

 到此，bug已解决。

四、总结。

4.1要记住，组件值要在父组件中修改好再传给子组件。因为子组件不可以直接修改父组件传来的值。

4.2有些vue版本不支持子组件直接接收父组件传来的值，所以需要在data里定义一个中间变量（相当于中转站）来接收父组件传来的值，然后子组件绑定这个中间变量，而不是直接绑定原来的父传来的值。否则，会报上面的错误。