关于Vue封装el-dialog关闭对话框报错问题
Vue2封装el-dialog,关闭弹窗时报错:Prop being mutated: "dialogFormVisible"
·
项目背景:
vue2.0 el-dialog封装
最近的一个项目存在大量的弹窗form,需要封装一个dialog。
问题描述
修改props的dialogFormVisible报错
在封装的子组件里我写了一个closeDelDialog方法来监听关闭事件。
<el-dialog ...
@close="closeDelDialog"
...">
props: {
dialogFormVisible: {
type: Boolean,
default: false
},
closeDelDialog(){
this.dialogFormVisible = false
}
当我点击右上角的关闭时,打印出以下错误:
[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: "dialogFormVisible"
如果你的vue基础扎实,应该已经看出问题所在了
原因分析:
根据错误提示,我来到了Vue官网,官方是这样说的:
单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。
额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。
解决方案:
知道了单项数据流,那这个问题就很好解决了
子组件修改closeDelDialog,通过$emit提交给父组件:
closeDelDialog(){
this.$emit('close');
}
父组件v-on拿到回调:
<DelDialog
...
v-on:close="closeDelDialog"
...
></DelDialog>
closeDelDialog(){
this.delDialogFormVisible = false
}
好了可以了,当我开心的打开浏览器关闭dialog时,有趣的事情来了…
What ??? 错误信息还在?
打开Vue工具,发现 dialogFormVisible 是变动了的,冷静分析,来个console.log(1)…
发现报错信息在"1"的前面,恍然大悟,让我想起了el-dialog的另一个属性:before-close!
官网是这样写的:
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
before-close | 关闭前的回调,会暂停 Dialog 的关闭 | function(done),done 用于关闭 Dialog | - | - |
…
我学了个啥…
最终方案
子组件:
<el-dialog
...
@close="closeDelDialog"
:before-close="closeDelDialog">
closeDelDialog(){
this.$emit('close');
}
父组件:
<DelDialog
...
v-on:close="closeDelDialog"
...
></DelDialog>
closeDelDialog(){
this.delDialogFormVisible = false
}
更多推荐
已为社区贡献2条内容
所有评论(0)