导入文件信息,如果模板错误会给出错误信息提示,所以把错误信息提示框,抽取出来当做一个单独的组件加入页面。
<import-error-dialog :loadingS='loadingS'
:exportErrorMessage="exportErrorMessage" //是否显示错误提示弹框
:exportErrorMessageList='exportErrorMessageList' /> //错误信息
<el-dialog title="导入模板错误信息"
:visible.sync="exportErrorMessage"
width="50%">
</el-dialog>
export default {
props: {
exportErrorMessage: {
type: Boolean,
default: () => false
},
exportErrorMessageList: {
type: Array,
default: () => []
}, // 导入错误信息列表
loadingS: {
type: Boolean,
default: () => false
}
},
data () {},
}
错误信息正常显示,但是当点击错误弹框的关闭按钮时报错
image.png
大致意思是子组件改变了父组件的属性,因为在组件中数据的传递是单项绑定,并不是双向,所以允许,父级传递给子级,但是不允许子级修改父级的属性值。
因为点击dialog的关闭框是相当于改变了exportErrorMessage的值,所以报错
所以它想要什么我们就给他什么,我们可以把数据改成双向绑定的形式
<import-error-dialog :loadingS='loadingS'
:exportErrorMessage.sync="exportErrorMessage" //改成双向绑定
:exportErrorMessageList='exportErrorMessageList' />
<el-dialog title="导入模板错误信息"
:visible.sync="visible"
width="50%">
</el-dialog>
export default {
props: {
exportErrorMessage: {
type: Boolean,
default: () => false
},
exportErrorMessageList: {
type: Array,
default: () => []
}, // 导入错误信息列表
loadingS: {
type: Boolean,
default: () => false
}
},
data () {
return {
visible: this.exportErrorMessage
}
},
watch: {
exportErrorMessage (val) {
this.visible = val
}
},
}
另取一个变量监测exportErrorMessage来控制dialog的显示与关闭。
采用另一种方式
image.png
image.png
image.png
此处采用update关键字进行dialog中的双向绑定.
网友评论