Vue: [Vue warn]: 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: "showIcon"

Created on 31 Jan 2018 · 7Comments · Source: vuejs/vue

Version

2.5.13

Reproduction link

https://codesandbox.io/s/728nx8mrm0

Steps to reproduce

pass .sync prop from parent to grandson through child

What is expected?

no warning

What is actually happening?

Source

rawbin-

Most helpful comment

Sync across multiple layers is a bad practice anyway, unless for coupled components. If used in an app context, consider using a global state management solution.

yyx990803 on 31 Jan 2018

👍7 🎉2

All 7 comments

the role of the Child component is just a component wrapper or sth like that

rawbin- on 31 Jan 2018

You have to reemit in the Child that passes down a prop:

<grandson :showIcon="showIcon" @update:showIcon="v => $emit('update', v)></grandson>

Remember that sync is just syntax sugar

posva on 31 Jan 2018

Sync across multiple layers is a bad practice anyway, unless for coupled components. If used in an app context, consider using a global state management solution.

yyx990803 on 31 Jan 2018

👍7 🎉2

@posva that make sense, is there any way to get rid of those things to make the wrapper more lighter weight, like react?

rawbin- on 2 Feb 2018

@yyx990803 大佬，建议在文档里说明一下啊。[手动狗头][手动狗头][手动狗头][无意冒犯]

daGaiGuanYu on 16 Jan 2019

What is a global state management solution?

I put it in an object.
parent:
<MyDateModePicker :date="date"></MyDateModePicker>
date: { D: '', W: '', M: '', mode: 'D' },
child component:
{{ date.mode }} {{ date }} {{ date.W }} <el-radio-group v-model="date.mode" size="small"> <el-radio-button label="D">日</el-radio-button> <el-radio-button label="W">周</el-radio-button> <el-radio-button label="M">月</el-radio-button> </el-radio-group>
It worked...