在ElementUi中,el-dialog是一个对话框,一般会将它和父容器分离。例如页面上有很多展示信息,其中有一个信息可以修改,至于具体如何修改,我们用el-dialog去做,这时将它和外层进行分离是一个明智的选择:

外层传递:visible.sync='outVisible',通过outVisible去控制el-dialog是否显示;在el-dialog中,则通过$emit('update:visible',false)去关闭对话框。

但是,如果此时直接关闭el-dialog右上角的关闭按钮,会报一个错误:

 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\

意思就是el-dialog不能直接操作外层传递的prop,因为这个visible是外层作为prop传递进来的,内部是不能修改的,内容只能通过$emit('update:visible ')才可以修改。

解决方案就是去掉el-dialog上的.sync,增加v-on:update:visible属性:

因为在el-dialog属性:visible.sync中的.sync相当于v-on:update:visible="visible=$name",也就是会直接修改从外层传进来的prop,我们把它改成$emit,就不会违背vue的单向数据流了。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字