vue 父组件调用孙子组件的方法：一个报错引出的子组件改变父组件属性的思考
vue 父组件调用孙子组件的方法：一个报错引出的子组件改变父组件属性的思考</NormalDialog><NormalDialog :title="dialogTitle" :openFlag="openFlag" :width="40%"><el-dialog :title="title" :visible.sync="openFlag" :modal-append-to-body="false" :width="width">或许我是个对话框，或许我不是一个对话框，who knows</el-dialog>
遇错小编初学Vue.js，在用其和element-ui写一个后台管理模版的时候，遇到以下错误：
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: "openFlag"
噢卖瓜，我只想好好写一下代码，为什么你会报这样的错误？求倒吗呆，好像我的页面还是能够正常运行。
解决在这里要说一下背景，小编是在用element-ui的Dialog对话框写一个组件，这时候需要父组件传一个布尔值来显示对话框，于是就有以下代码：
- Dialog对话框组件
<el-dialog :title="title" :visible.sync="openFlag" :modal-append-to-body="false" :width="width">
或许我是个对话框，或许我不是一个对话框，who knows
</el-dialog>
- 父组件使用
<NormalDialog :title="dialogTitle" :openFlag="openFlag" :width="40%">
</NormalDialog>
在我苦思冥想之际，瞄了一眼element-ui的对话框文档，有下图：
element-ui文档
请注意图中的红线部分，“支持.sync修饰符”，再想想我们刚才的报错，小编直接了当的把.sync修饰符去掉了，代码如下：
<el-dialog :title="title" :visible="openFlag" :modal-append-to-body="false" :width="width">
或许我是个对话框，或许我不是一个对话框，who knows
</el-dialog>
保存后，果然打开对话框时不再报错。
分析回想刚刚的报错，小编的英文不大好，就大致说一下自己理解的意思：避免直接修改prop，因为父组件重新渲染后，该值就会被覆盖，用一个基于openFlag的数据或可计算的属性来监听其变化。
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: "openFlag"
换个话来说就是子组件不能改变父组件的属性，而element-ui对话框的“.sync”属性，会同步改变父组件的属性，但这是vue不允许的，所以控制台打印了这一波错出来。
方案当然，我们都知道，从父组件可以将值传到子组件的props，换句话说，父组件可以决定子组件的值，可以改变子组件的值。那么，如果我们还是想改变父组件的属性值，那应该怎么办呢？
我们可以给子组件添加一个自定义事件，在子组件改变值的时候，添加以下代码：
close:function(){
this.$emit("callback" false); //这里的意思是为子组件添加一个callback的属性，并传递一个false的参数
}
那么，父组件，就可以这么写：
<NormalDialog :title="dialogTitle" :openFlag="openFlag" :width="40%" @callback="dialogCallBack">
</NormalDialog>
这时候，父组件的dialogCallBack方法，就可以为所欲为了
dialogCallBack:function(flag){
this.openFlag = flag;
}
由于小编的技术水平有限，如果有文中有什么错误，欢迎大家指出。
