Avoid mutating a prop directly since the value will be overwritten...

前段时间想要把所有弹框都写成组件，方便在父组件中调用，最后在关闭的时候遇见了一些问题

这是父组件

<!-- 新增规格属性对话框 -->
<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就是你在关闭弹框前的操作，那么我们就可以在这里面写我们的逻辑处理啊，比如询问用户确认关闭嘛，如果确认子组件再传值，不确认直接返回

好了，那么这次记录就到这里了，下次有问题再继续解决吧。

赞赏作者

扫一扫支付

 支付宝支付  微信支付