徹底明白VUE修飾符sync

對于VUE的初學者來講,肯定會感覺prop的寫法很麻煩,很討厭!你肯定想如果prop也可以實現雙向綁定那怎是一個爽字了得!不過現實是殘酷的,如果子組件可以任意修改父組件的內容,那勢必會帶來數據的混亂,從而造成維護的困擾!畢竟父組件也是有尊嚴的!

官方推薦使用一種update:my-prop-name 的模式來替代事件觸發,目的是為了優雅而不粗魯的實現父子組件間的雙向綁定!先來完成一個小功能:通過父組件按鈕將子組件顯示出來,如圖:



父組件代碼:

<template>
    <div>
        <input type="button" 
               value="我是父組件中的按鈕" 
               @click="show">
        <child v-show="isShow"/>
    </div>
</template>
<script>
    import child from "@/components/child"
    export default {
        data() {
            return {
                isShow:false
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.isShow=true;
            }
        }
    }
</script>

子組件child代碼:

<template>
    <div>
         我是一個子組件,我在紅色的海洋里!
    </div>
</template>
接下來加個需求,在子組當中增加一個按鈕,通過該按鈕來將自已隱藏起來!需要借助父子之間的傳值了!如圖:

父組件代碼:

<template>
    <div>
        <input type="button"
               value="我是父組件中的按鈕"
               @click="show">
        <child @upIsShow="changeIsShow" v-show="isShow"/>
    </div>
</template>
<script>
    import child from "@/components/child"
    export default {
        data() {
            return {
                isShow:false
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.isShow=true;
            },
            changeIsShow(bol){
                this.isShow=bol;
            }
        }
    }
</script>

子組件代碼:

<template>
    <div>
         我是一個子組件,我在紅色的海洋里!
        <input type="button" value="點我隱身" @click="upIsShow">
    </div>
</template>
<script>
    export default {
        methods:{
            upIsShow(){
                this.$emit("upIsShow",false);
            }
        }
    }
</script>
如果我要將父組件中的事@upIsShow修改為@update:isShow不違法吧:
<child @update:isShow="changeIsShow" v-show="isShow"/>
子組件的emit自然也要做對應調整:
upIsShow(){
    this.$emit("update:isShow",false);
}

運行一下,一切正常!真好!

那么如果現在我將父組件的changeIsShow直接寫成匿名函數,也能運行吧:
<child @update:isShow="function(bol){isShow=bol}" v-show="isShow"/>

再次運行,一切還是那么美好,真好!

現在我將那匿名函數改成箭頭函數,不過分吧:
<child @update:isShow="bol=>isShow=bol" v-show="isShow"/>

再運行一次,完美,真好!

最后我將上面那行代碼做最后一次修改:
<child :isShow.sync="isShow" v-show="isShow"/>

至此終于涉及到了sync了。以上代碼 :isShow.sync="isShow"其實是 @update:isShow="bol=>isShow=bol"語法糖。是其一種簡寫形式。附上完整代碼。
父組件:

<template>
    <div>
        <input type="button"
               value="我是父組件中的按鈕"
               @click="show">
        <child :isShow.sync="isShow" v-show="isShow"/>
    </div>
</template>
<script>
    import child from "@/components/child"
    export default {
        data() {
            return {
                isShow:false
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.isShow=true;
            },
            changeIsShow(bol){
                this.isShow=bol;
            }
        }
    }
</script>

子組件:

<template>
    <div>
         我是一個子組件,我在紅色的海洋里!
        <input type="button" value="點我隱身" @click="upIsShow">
    </div>
</template>
<script>
    export default {
        methods:{
            upIsShow(){
                this.$emit("update:isShow",false);
            }
        }
    }
</script>

最后:sync只是給大家伙提供了一種與父組件溝通的思路而已!所以在后面日子里,你如果只是單純的在子組件當中修改父組件的某個數據時,建議使用sync,簡單,快捷,有檔次!真好!

—————END—————
喜歡本文的朋友們,歡迎關注公眾號 張培躍,收看更多精彩內容
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 作為一個合格的開發者,不要只滿足于編寫了可以運行的代碼。而要了解代碼背后的工作原理;不要只滿足于自己的程序...
    六個周閱讀 8,507評論 1 33
  • 什么是組件? 組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素,封裝...
    youins閱讀 9,525評論 0 13
  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,241評論 0 6
  • VUE介紹 Vue的特點構建用戶界面,只關注View層簡單易學,簡潔、輕量、快速漸進式框架 框架VS庫庫,是一封裝...
    多多醬_DuoDuo_閱讀 2,731評論 1 17
  • 上午爸爸帶著好婆去了醫院,爸等醫生查完病房就回來安排工作事務,好婆留在醫院照顧好公。
    MengMeng啊MengMe閱讀 167評論 0 1