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>
重点就是,不要直接将父组件传递的值用来控制模态框的展示与否。