Vue2.0子组件修改父组件传来的值时报错

场景：

子组件是一个弹窗，父组件传值控制弹窗的显示。当在子组件关闭弹窗时，会改变父组件传来的值，这时控制台报错。

代码：

<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
    },
},