在 Vue.js 中，使用 .sync 修飾符時(shí)，能夠?qū)崿F(xiàn)父組件和子組件之間的雙向綁定。這種雙向綁定的實(shí)現(xiàn)是基于一個(gè)約定：使用 .sync 修飾符綁定的屬性需要滿足以下條件：

屬性名稱需要帶有 v-bind 的動(dòng)態(tài)屬性綁定語(yǔ)法。
在子組件內(nèi)部，通過(guò) $emit 觸發(fā)一個(gè)事件來(lái)更新該屬性的值。
這樣，父組件中綁定的屬性會(huì)實(shí)時(shí)響應(yīng)子組件的變化，而子組件通過(guò)觸發(fā)事件將變化傳遞給父組件。

在你提供的代碼中，使用對(duì)象 paraObject 可以實(shí)現(xiàn)雙向綁定，而使用普通的變量 isShow 則不能實(shí)現(xiàn)雙向綁定。這是因?yàn)閷?duì)象是引用類型，對(duì)象的屬性可以通過(guò)引用來(lái)共享，從而實(shí)現(xiàn)雙向綁定。

在對(duì)象的情況下，當(dāng)你在父組件中更新 paraObject.isShow 的值時(shí)，子組件中綁定的 :is-show.sync 屬性會(huì)實(shí)時(shí)更新，并且子組件通過(guò) $emit 觸發(fā)的事件也會(huì)同步更新父組件中的 paraObject.isShow 值。

而在普通變量的情況下，變量是按值傳遞的，無(wú)法直接共享內(nèi)存地址，所以無(wú)法實(shí)現(xiàn)雙向綁定。如果你希望在子組件中更新變量的值并反映到父組件中，你需要通過(guò)事件的方式顯式地將變量的新值傳遞給父組件。

綜上所述，使用對(duì)象作為屬性可以實(shí)現(xiàn)雙向綁定，而普通變量則需要通過(guò)事件的方式來(lái)進(jìn)行值傳遞。

image.png

2.16.4 直接sync  props是沒(méi)問(wèn)題的, 而在2.17.4 sync必須是date里的值, 否則會(huì)報(bào)錯(cuò)

使用常量, 子組件$emit事件, vue 2.7以上需要配合watch使用, 真是吐了

使用對(duì)象, 子組件不改變引用就不會(huì)發(fā)生問(wèn)題, 真的好用, 文檔真的不推薦. 如果嚴(yán)格控制, 暫時(shí)沒(méi)發(fā)現(xiàn)什么問(wèn)題

使用computed
showDialog:{
            get() {
                return this.visible;
            },
            set(value) {
                // 在這里可以根據(jù)需要進(jìn)行相應(yīng)的邏輯處理
                // 例如，可以觸發(fā)一個(gè)自定義事件來(lái)通知父組件更新 prop 值
                this.$emit('update:visible', value);
            }
        }