vue父子组件赋值操作时报错Avoid mutating a prop directly since the value will be overwritten whenever

前言: 我写了一个组件,然后子组件外层绑定了一个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>