VUE报错__Avoid mutating a prop directly since the value will be overwritten whenever the parent

1. vue报错：

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: "drawer"

避免直接更改道具，因为每当父组件重新渲染时，该值都会被覆盖。而是使用基于道具值的数据或计算属性。道具变异：“抽屉”

2. 错误原因

避免直接改变属性，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于属性值的数据或计算属性。通过props传递给子组件的drawer，不能在子组件内部修改props中的drawer值。

3. 解决方法

（1）父组件向子组件传递值

<addDrawer :drawer="drawer"/>

（2）子组件中接收drawer

props: ['drawer']

（3）在子组件中使用before-close：关闭前的回调，会暂停 Drawer 的关闭，并通过$emit将方法传递给父组件

<el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" :before-close="closeAddUser">
  <span>我来啦!</span>
</el-drawer>

closeAddUser(){
    this.$emit('closeAddUser')
}

（4）父组件通过自定义事件进行接收

<addDrawer :drawer="drawer" @closeAddUser="onCloseAddUser"/>

onCloseAddUser() {
  this.drawer = false
}

完整代码：
父组件：

<addDrawer :drawer="drawer" @closeAddUser="onCloseAddUser" />

onCloseAddUser() {
  this.drawer = false
}

子组件：

<template>
  <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" :before-close="closeAddUser">
    <span>我来啦!</span>
  </el-drawer>
</template>

<script>
export default {
  props: ['drawer'],
  methods:{
    closeAddUser(){
      this.$emit('closeAddUser')
    }
  }
}
</script>