技術標籤：vue

場景：

子元件是一個彈窗，父元件傳值控制彈窗的顯示。當在子元件關閉彈窗時，會改變父元件傳來的值，這時控制檯報錯。

程式碼：

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