前言: 我写了一个组件,然后子组件外层绑定了一个v-model=‘moreInquiriesCard’, 这个值通过props取的父组件传过来的值,子组件是个modal弹框,对默认右上角有个"x"跟右下角取消按钮,在子组件内部直接操作props的moreInquiries为false,然后一点击子组件取消按钮或者右上角的’x’就会报错,如下图
错误原因很简单: 就是你在子组件内部直接改动了props中的数据,在vue2中组件props中的数据只能单向流动,不能直接修改由父组件props传过来的值,
// 父组件
<template>
<Button size='small' type='primary' @click='getMapInFo'></Button>
<more-inquiries :key='timer' :moreInquiriesCard='moreInquiriesCard'></more-inquiries>
</template>
<script>
import moreInquiries from '@/components/moreInquiries.vue';
export default {
name:'cardPro',
components: { moreInquiries }
data () {
return {
moreInquiriesCard : false,
timer: ''
}
},
created () {},
methods: {
// 点击按钮弹出子组件
getMapInFo () {
this.timer = new Date().getTime()
this.moreInquiriesCard = true
}
}
}
</script>
子组件是一个modal弹框,解决的方法很简单,
方法一: 要么在点击取消或者右上角’x’关闭写一个事件,$emit调用父组件的方法,在父组件里面去改变moreInquiriesCard的值
方法二: 不要直接操作props的值,那就在组件初始化的时候把props的值赋值给其他变量(我用的这种)
// moreInquiries 子组件代码
<template>
<div class='more-inquiries'>
<Modal scrollable v-model='moreInquiries' :mask='false' title='更多查询条件' width='65%'>
//写自己弹框里面的需求
</Modal>
</div>
</template>
//js
<script>
export default {
name:'moreInquiries',
props: {
moreInquiriesCard: {
type: Boolean,
default: false
}
}
data () {
return {
moreInquiries: this.moreInquiriesCard // 避免直接操作props里面的值
}
},
}
</script>