Avoid mutating a prop directly since the value will be overwritten...
Avoid mutating a prop directly since the value will be overwritten...
小美女 2021-01-16 暂无评论 暂无分类 20
前段时间想要把所有弹框都写成组件,方便在父组件中调用,最后在关闭的时候遇见了一些问题
这是父组件
<!-- 新增规格属性对话框 -->
<addStandard v-if="standardStatus" :isAddStandard="isAddStandard"></addStandard>
<script>
import addStandard from '@/components/standard/addStandard.vue'
export default {
// 商品列表
name: "goodsList",
components:{
addStandard,
},
data() {
return {
standardStatus: false,
isAddStandard: false,
}
}
}
</script>
这是子组件
<template>
<div>
<!-- 新增规格属性对话框 -->
<el-dialog title="新增规格属性" :visible.sync="isAddStandard" width="40%" :append-to-body="true">
......
</el-dialog>
</div>
</template>
<script>
export default {
// 新增规格
name: "addStandard",
props:{
isAddStandard: Boolean,
},
}
</script>
点击新增规格时通过改变状态传递给自组件,让弹框出来,子组件接收父组件的传值
但是当我点击取消获取提交表单的时候,出现了报错信息
大概意思是:通过props传递给子组件的值,不能在子组件内部修改
后来我在点击取消或提交的时候,子组件给父组件传值,告诉父组件,改变一下状态值this.$emit=("close", 10)
但是当我测试的时候发现,当我点击弹框右上角的关闭按钮或者弹框其余的空白部分时,依然会出现这个报错,并且就不能再次点击弹框了
经过查资料,我最后给弹框设置了:show-close="false" :close-on-click-modal='false'
即不显示右上角的关闭按钮,不支持点击弹框空白区域关闭弹框
其实还有别的方法,比如element dialog有个属性before-close
就是你在关闭弹框前的操作,那么我们就可以在这里面写我们的逻辑处理啊,比如询问用户确认关闭嘛,如果确认子组件再传值,不确认直接返回
好了,那么这次记录就到这里了,下次有问题再继续解决吧。
瞅我来气不?用红包砸死我吧

