在子组件直接修改父组件的报错信息:vue.js:597 [Vue warn]: Avoid mutating a prop directly since the value will be ov...

在vue中子组件是不允许直接修改父组件传过来的数据,因为如果父组件传过来的数据如果是数组或者是对象的数据的话,在

子组件中直接修改传过来数据的话,会影响到其他组件的数据,所以要在子组件data数据里定义一个变量来保存父组件传过来的

数据。

 

在子组件直接修改父组件的报错信息:vue.js:597 [Vue warn]: Avoid mutating a prop directly since the value will be ov..._第1张图片

但是这样的话,定义的局部变量ttt只能接受conten的初始值,当父组件要传递的值发生变化时,ttt就无法接收到最新的值了

我们可以定一个计算属性,watch()监听conten 的值发生改变并返回更新到子组件的数据

 

在子组件直接修改父组件的报错信息:vue.js:597 [Vue warn]: Avoid mutating a prop directly since the value will be ov..._第2张图片

这样就可以同步到子组件的数据了,

不过接下来可能会有这样一个需求,子组件更新数据后也要同步到父组件的数据,那么用的之前所学的自定义事件方法,把子组件

ttt的数据发送到父组件,在父组件监听这个自定义的事件,来接收子组件传过来的数据:

 

在子组件直接修改父组件的报错信息:vue.js:597 [Vue warn]: Avoid mutating a prop directly since the value will be ov..._第3张图片 子组件发送事件标题

 

在子组件直接修改父组件的报错信息:vue.js:597 [Vue warn]: Avoid mutating a prop directly since the value will be ov..._第4张图片 父组件监听事件标题

 

在子组件直接修改父组件的报错信息:vue.js:597 [Vue warn]: Avoid mutating a prop directly since the value will be ov..._第5张图片 父组件执行事件方法标题

 




转自:https://www.jianshu.com/p/758a9387f93b

你可能感兴趣的:(vuejs)