vue子组件修改父组件的值

vue子组件修改父组件的值

最近在写uniapp项目，ui库是 uview，再将模态框（u-modal）封装成组件的时候，遇到这种脑残问题，首先看报错。

使用了vue 的.sync 修饰符，但是完全没啥卵用。

这就不用说子组件emit父组件的自定义事件了，肯定没啥卵用，我也试了。
原因是，uview 的模态框的取消按钮会自己改变v-model 的值，所以导致了点击取消，提示子组件修改了父组件的值。

以下解决办法：

// 父组件
<BuChaJiaPop :status="chaJiaStatus" @cancel="cancel" />

// 子组件
<template>
	<u-modal v-model="showStatus" title="提示信息" @confirm="submit" @cancel="cancel" show-cancel-button>
		// xxxxxxxx
	</u-modal>
</template>
<script>
export default {
	props: {// 接收父组件传递的数据
		status: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			showStatus: false
		}
	},
	watch: {
		status(newV) {// 监听父组件传递的参数，赋值给一个新的变量
			this.showStatus = newV
		}
	},
	cancel() {// 调用父组件的自定义事件，关闭弹窗
		this.$emit('cancel')
	}
}
</script>

重点就是，不要直接将父组件传递的值用来控制模态框的展示与否。