在写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: "value"。
错误的原因是，父组件通过prop传值给子组件，当子组件内部该值发生变化时就会出现这个问题。我们解决办法的思路如下：
我们在父组件中传value值给子组件，然后子组件中通过prop接收，然后我们在data中重新定义一个新值value1来接收prop传过来的value，后续我们修改value1就可以了。
// 父组件传值value//子组件export default { props: { value: '' // 子组件通过prop接收父组件 }, data () { return { options: [], value1: this.value //关键操作用新值接收value } }, methods: { onChange(val) { if(val) { this.$emit('select', val) }else{ this.value1 = "" this.$emit('select', "") } } } }
但是通过实践，在选择下拉框时报错是没有了，但是父组件传新值子组件确没办法数据双向改变，所以我们需要加一个数据监听操作：
watch: { value: { immediate: true, handler: function(val) { var that = this that.value1= val; } } }
这样我们会发现控制台没有了警告，大功告成，欢迎大家指导纠错。
| 
转播
