废话
常见报错
大概意思就是子组件不能直接更改父组件props的数据
常见场景,点击弹出子组件,你在取消和确定上,写了emit,不会报错,但是点空白处,或者X,时,就会报错
正文
普通写法
父组件
子组件
看似没问题,但是就会报错
解决方法
第一种
子组件
父组件不动,子组件,关闭前去触发父组件的cancel 方法,将props传的改为false,方便
:before-close="
() => {
$emit('cancel', false);
}
"
第二种 异步 visible 官方推荐
父组件
其他不变,用visible.sync绑定开关值
:visible.sync="isShow2"
子组件
porps接收,watch监听变化,绑定到新变量上,close时去更新visible
<template>
<div>
<el-dialog
title="提示"
:visible.sync="show2"
width="30%"
@close="
() => {
$emit('update:visible', false);
}
"
>
<span>我是子组件二</span>
<span slot="footer" class="dialog-footer">
<el-button @click="$emit('cancel2', false)">取 消</el-button>
<el-button type="primary" @click="$emit('submit2', false)"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "child",
props: {
visible: Boolean,
default: () => {
return false;
}
},
watch: {
visible(val) {
this.show2 = val;
}
},
data() {
return {
show2: this.visible
};
},
methods: {},
created() {}
};
</script>
<style lang="less" scoped></style>