强迫症讨厌的vue警告，[Vue warn]Prop being mutated: “visible“

• 写VUE组件的时候，用到Modal经常会有这个警告，强迫症看的不舒服：
  [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "visible"
• 原因：关闭的时候，调用父组件的方法，然后去改变visible值，再改变子组件的可见，产生了警告

1.最新解决方案：2021-08-18（推荐）

1.1页面上使用

父组件（页面）中：

组件使用

<edit-department :visible.sync="visible" />

组件引入

import EditDepartment from '@/components/modal/department/EditDepartment '

组件注册

components: { EditDepartment }

弹出组件：

方法中：使用子组件的显示方法
this.visible = "true"

组件

<template>
<!-- 重点在这里，visible改用value绑定了，不再是原来的v-model-->
  <Modal width="600" :value="visible" title="弹出框" @on-visible-change="visibleChange">
    <Form ref="formValidate" class="form" :model="form" :label-width="80">
      <FormItem label="名称">
        <Input v-model="form.name" />
      </FormItem>
    </Form>
    <div slot="footer">
      <Button @click="close">取消</Button>
      <Button type="primary" @click="submit">确定</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form:{
      	name: '',
    	}
    }
  },
  methods: {
    // 模态框状态发生改变(这个一定要有)
    visibleChange(val) {
      if (!val) {
        this.close()
      }
    },
    close() {
      this.$emit('update:visible', false)
    },
    clear() {
      Object.keys(this.form).forEach((x) => (this.form[x] = null))
      this.handleReset()
    },
    // 验证与清除验证
    handleSubmit() {
      let bool
      this.$refs.formValidate.validate((valid) => {
        if (valid) {
          bool = true
        } else {
          this.$Message.error('请输入完整信息!')
          bool = false
        }
      })
      return bool
    },
    handleReset() {
      this.$refs.formValidate.resetFields()
    },
  },
}
</script>

旧版解决方案：2021-03-08

现在找到一个解决方案，把visible值的改变，全都放进子组件里通过子组件来改变

组件Modal，使用父组件调用子组件，去改变visible

父组件（或者是页面）中：

组件使用：（注意带上ref，方便调用组件里的方法）

<del-department ref="delDepartment" @on-ok="clear => delDepartment(clear)"></del-department>

组件引入

import DelDepartment from '@/components/modal/department/DelDepartment'

组件注册

components: { DelDepartment }

弹出组件：

方法中：使用子组件的显示方法
this.$refs.delDepartment.open()

子组件：

<template>
  <div class="modal-botton">
    <Modal class="delete-modal" class-name="vertical-center-modal" v-model="visible">
      <!-- 右上角关闭位置，自定义 -->
      <!-- <p slot="close"></p> -->
      <!-- 头部自定义 -->
      <p style="color: #fff" slot="header"></p>
      <!-- 内容自定义 -->
      <h3 style="text-align: center; margin-top: 20px">确认删除,删除后无法恢复</h3>
      <div class="delete-footer" slot="footer">
        <Button @click="close" style="background: #d7d7d7; color: white">取消</Button>
        <Button @click="isOK" type="info" style="background: #5f84ff; color: white; margin-left: 100px" ghost>确认</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
    }
  },
  methods: {
    isOK() {//调用父组件的方法
      this.$emit('on-ok', this.close)
    },
    close() {
      this.visible = false
    },
    open() {
      this.visible = true
    },
  },
}
</script>
<style lang="less">
.modal-botton {
  display: inline-block;
  .button {
    cursor: pointer;
  }
}
.delete-modal {
  .ivu-modal-header {
    background-color: #1562be;
  }
  .delete-footer {
    display: flex;
    justify-content: center;
  }
  .vertical-center-modal {
    top: 200px;
  }
}
</style>