vue報錯:void 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:
看了很多大佬的方法,恕我直言,沒有一個有用的,試了兩天沒什么用;
最后唯一的解決辦法就是父子雙向傳參解決,話不多說,代碼如下:
// 父組件引用
<hi-popSelect :isShow="isShow" @func="getMsg"></hi-popSelect>
import popSelect from '../components/popSelect';
components: {
'hi-popSelect': popSelect
},
data(){
return {
isShow: false
}
}
methods: {
getMsg (data) {
this.isShow = data;
},
}
子組件:(我用的是elements的dialog對話框為例)
<el-dialog class="hi-dialog"
:visible.sync="currentIsShow">
</el-dialog>
// 父子傳參(父傳子)
props: ['isShow'],
data(){
return {
currentIsShow: this.isShow, // 在data里重新賦值,不改變父組件傳值
}
}
watch: {
// 監聽父組件傳參變化重新賦值
isShow (val) {
this.currentIsShow = val;
}
},
methods: {
// 關閉對話框並把值傳給父組件 (子傳父)
hideData () {
this.$emit('func', this.currentIsShow);
},
}
以上方法完美解決問題,如有更好的解決方法請大佬在下方留言,十分感謝!