韶华小苑 |

时光不负终不老

您现在的位置是: 首页 > 文章 >

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

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

本文链接: https://hw13.cn/c760ed6813d1fde8f66698991343e4f4.html 最后修改时间: 2021-01-16 15:40:30

瞅我来气不?用红包砸死我吧

赞赏作者
扫一扫支付