场景:
子组件是一个弹窗,父组件传值控制弹窗的显示。当在子组件关闭弹窗时,会改变父组件传来的值,这时控制台报错。
代码:
<div class="user-status"
@click="loginDialogVisible = true">
<i class="el-icon-user"></i>
<span>快速登录/注册</span>
</div>
// UserLogin为弹窗组件
<UserLogin :loginVisible.sync="loginDialogVisible"></UserLogin>
// UserLogin组件内容
<el-dialog :visible.sync="loginVisible"
custom-class="loginDialog">
</el-dialog>
props: {
loginVisible: {
type: Boolean,
defaule: false
}
},
关闭弹窗后控制台报错:
分析:
报错内容:避免直接改变属性,因为每当父组件重新渲染时,该值都将被覆盖。
结论:不推荐子组件直接修改父组件中的参数,避免这个参数多个子组件引用,无法找到造成数据不正常的原因。
更正:
子组件中再定义一个参数,使用
$emit(update: prop, “newPropVulue”) => $emit(update: 属性名, “新的属性值”)
来更新父组件的参数。
代码:
// UserLogin组件内容
<el-dialog :visible.sync="dataCloseVisible"
custom-class="loginDialog">
</el-dialog>
props: {
loginVisible: {
type: Boolean,
defaule: false
}
},
watch: {
dataCloseVisible: function () {
this.$emit('update:loginVisible', this.dataCloseVisible)
},
loginVisible: {
handler: function (newValue) {
this.dataCloseVisible = newValue;
},
immediate: true
},
},