Avoid mutating a prop directly since the value will be overwritten报错问题解决方案

一、复现？

在用uniapp，二次封装uview的u-modal时，使用v-model="showModal"时报错（需求是点击退出登录然后需要弹出模态框），原因是将showModal作为props传递给父组件，父组件直接改变了子组件的值，这是不被单向数据流所允许的。

二、解决方案

在data中定义一个show，用作子组件的初始值，并定义方法，来设置show的显示和隐藏；同时，在父组件中注册ref，通过this.$refs.xxx.方法名()的方式来设置子组件的显示和隐藏。

代码

子组件

<u-modal v-model="show" @confirm="confirm">
</u-modal>

<script>
	export default {
		name: "lg-modal",
		emits: ['confirm'],
		props: {
			showModal: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				show:this.showModal,
			};
		},
		methods: {
			// 点击确定的响应事件
			confirm() {
				this.$emit("confirm")
			},
			// 通过ref来使子组件显示或隐藏
			setShow() {
				this.show = !this.show
			}
		},
	}

父组件

<lg-modal ref="lgModal" @confirm="confirmExit"></lg-modal>
			//此时点击退出登录，触发事件
			toExit() {
				//这是错误代码
				// this.show = true;
				//通过ref控制
				this.$refs.lgModal.setShow()
			},
			//confirmExit执行点击确定的事件---
			confirmExit(){
			
			}