vue element 掉用子组件，子组件dialog关闭后，会提示如下错误

Question

问题描述：
父页面点击按钮后，正常显示子组件里的dialog，
子组件dialog关闭后，会提示如下错误（好像不影响正常使用）：

vue.esm.js?efeb:628 [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"

---

父页面代码如下

<el-button type="primary" size="mini" @click="Visible=true">新增</el-button>
<addinfo ref="info" v-if="Visible" :visible.sync="Visible"></addinfo>

---

子组件代码如下：

<template>
  <el-dialog title="新增" :visible.sync="visible" @close="closeDialog">
      123
    </el-dialog>
</template>

<script>
export default {
  props:['visible'],
  data() {
    return {
  
    }
  },
  methods:{
      //关闭Dialog
      closeDialog(){
        this.$emit('update:visible', false);
      }
  },
};
</script>

---

提示错误图片：

Answer 1

警告已经说明白了，至于怎么解决很简单，addinfo 的显示和不显示不应该直接使用el-dialog的visible,因为el-dialog的visible会被自己内部修改，本身已经破坏了规则，此时你再来一层，继续破坏规则，相当于el-dialog的内部直接修改了自己父级，自己的父级又修改了它的父级~~~~ 乱了~没规矩了

// 去掉sync 修饰符，断开内部修改自身(双向绑定)，通过close事件触发上级addinfo的回调函数来改变addinfo visible，el-dialog通过 prop 传递过来的 visible 控制显示隐藏

// 修改如下：
<el-button type="primary" size="mini" @click="Visible=true">新增</el-button>
<addinfo ref="info" v-if="Visible" :visible="Visible" @close="Visible=false"></addinfo>

//子组件
<template>
  <el-dialog title="新增" :visible="visible" @close="$emit('close')">
    123
  </el-dialog>
</template>

<script>
export default {
  props:['visible'],
  data() {
    return {
  
    }
  }
};
</script>

也可以把el-dialog :visible.sync 改成 :visible

Answer 2

你可以在子页面传方法出去，改父页面调用方法，进行修改。

比如：

子页面

closeDialog(){
    this.$emit('closeModal', false);
}

父页面

<addinfo ref="info" v-if="Visible" :visible.sync="Visible" @closeModal="closeModal"></addinfo>

...
methods: {
    closeModal(val){
        this.Visible = val
    }
}

Answer 3

避免直接改变属性，因为每当父组件重新呈现时，该值都将被覆盖。相反，应该使用基于props的数据或计算属性。