欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue重要修飾符.sync對比v-model的區(qū)別及使用詳解

 更新時間:2022年07月26日 16:35:42   作者:前端新猿努力成長  
這篇文章主要為大家介紹了Vue中重要修飾符.sync與v-model的區(qū)別對比及使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

Vue 中的雙向綁定

上一節(jié)中我們已經(jīng)討論過Vue中并沒有真正的雙向綁定。Vue中的 props等數(shù)據(jù)是單向流動的,由父級至子級向下綁定的,即:每次父組件更新時,子組件中的所有 props 都會刷新為最新的值。如果在子組件中修改 props ,Vue會向你發(fā)出一個警告,且并不能通過修改子組件的數(shù)據(jù)來更改父組件的數(shù)據(jù))。

如果有需求,我們可以在父組件中,子組件的標簽上聲明一個監(jiān)聽事件,在子組件想要修改數(shù)據(jù)時使用$emit觸發(fā)事件并傳入新的值,通知父組件進行修改。這就可以實現(xiàn)某種程度上的雙向綁定。

真正的雙向綁定會帶來維護上的問題,因為子組件可以變更父組件,且在父組件和子組件兩側(cè)都沒有明顯的變更來源。Vue 團隊推薦以 update:myPropName 的模式觸發(fā)事件取代直接修改的操作。這就用到了 .sync 修飾符。

Vue 中的 .syc 修飾符

自定義組件中,v-bind命令的 .sync 修飾符同 v-model 一樣,其實本質(zhì)上都是Vue的語法糖,用于實現(xiàn)父子組件間接的數(shù)據(jù)雙向綁。需要注意的一點是,Vue3 中已經(jīng)不再有 .sync 修飾符了,新的 v-model 取代了 Vue2 中的 v-model 和 .sync 修飾符。本文作為 Vue 入門的心得總結(jié),這里討論的是 Vue2中 的 .sync 修飾符。

一言以蔽之,v-bind命令的.sync 修飾符實質(zhì)就是父組件監(jiān)聽子組件更新某個props的請求的縮寫語法,一種語法糖。

如:

<Child v-bind:title.sync="title" />

完全等價于:

<Child
  v-bind:title="title"
  v-on:update:title="title = $event"
></Child>

與之配合,在子組件中,需要添加下面這段代碼來通知父組件對這個prop重新賦值:

this.$emit('update:title', newTitle)

這一個 $emit 可以通過綁定事件觸發(fā),也可以使用 watch 監(jiān)聽等方式來觸發(fā)。

此外,當我們用一個對象 obj 同時設置多個 prop 的時候,也可以將這個 .sync 修飾符和 v-bind 配合使用:

<Son v-bind.sync="obj"></Son>
data(){
        return {
            obj:{read:true, name:'', title:'', length:''}
        }
    },

這樣會把 obj 對象中的每一個 property (如 title) 都作為一個獨立的 prop 傳進去,然后各自添加用于更新的 v-on 監(jiān)聽器。

.sync 使用注意事項

需要注意,帶有 .sync 修飾符的 v-bind命令 不能 和表達式一起使用
(例如 :title.sync=”doc.title + ‘!’” 是無效的)。

你只能提供你想要綁定的 property 名,類似 v-model。

另外還需要注意將 v-bind.sync 用在一個字面量的對象上,例如 v-bind.sync=”{ title: doc.title }”,是無法正常工作的,因為在解析一個像這樣的復雜表達式的時候,有很多邊緣情況需要考慮。

.sync 與 v-model的比較

.sync 從功能上看和 v-model 十分相似,都是為了實現(xiàn)數(shù)據(jù)的“雙向綁定”,本質(zhì)上,也都不是真正的雙向綁定,而是語法糖,這是他們的相同之處。

但相比較之下,.sync 更加靈活,它可以在一個組件內(nèi)給多個 prop 使用,而 v-model 在一個組件中只能有一個 prop ,在 Vue2 中是這樣。

需要注意,Vue3中 v-model 已經(jīng)可以給多個prop使用了 

從語法的內(nèi)容來看,v-model 綁定的值和觸發(fā)的事件是較為固定的,根據(jù)不同類型的特定組件有對應的綁定值和事件,比如 input 組件,select 組件等表單組件,日期時間選擇組件,顏色選擇器組件等,這些組件所綁定的值使用 v-model 比較合適。

其他情況下,需要父子組件之間數(shù)據(jù)相互更新,還是使用 .sync。.sync 針對更多的是各種的狀態(tài)變更,在父子組件之間互相傳遞,是一種 update 操作。

以上就是Vue重要修飾符.sync對比v-model的區(qū)別及使用詳解的詳細內(nèi)容,更多關(guān)于Vue修飾符.sync v-model的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • vue學習之Vue-Router用法實例分析

    vue學習之Vue-Router用法實例分析

    這篇文章主要介紹了vue學習之Vue-Router用法,結(jié)合實例形式分析了Vue-Router路由原理與常見操作技巧,需要的朋友可以參考下
    2020-01-01
  • vue中@click綁定事件點擊不生效的原因及解決方案

    vue中@click綁定事件點擊不生效的原因及解決方案

    根據(jù)Vue2.0官方文檔關(guān)于父子組件通訊的原則,父組件通過prop傳遞數(shù)據(jù)給子組件,子組件觸發(fā)事件給父組件,這篇文章主要介紹了vue中@click綁定事件點擊不生效的解決方案,需要的朋友可以參考下
    2022-12-12
  • Vue中el-table條件渲染防止樣式亂掉(解決方法)

    Vue中el-table條件渲染防止樣式亂掉(解決方法)

    這篇文章主要介紹了Vue中el-table條件渲染防止樣式亂掉問題,通過使用:key="Math.random()" 可解決樣式錯亂問題,此key屬性是vue自帶的特殊屬性,主要用在 Vue 的虛擬 DOM 算法,在新舊 nodes 對比時辨識 VNodes,依次來提升頁面渲染性能,感興趣的朋友一起看看吧
    2023-11-11
  • vue 中 命名視圖的用法實例詳解

    vue 中 命名視圖的用法實例詳解

    這篇文章主要介紹了vue 中 命名視圖的用法,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友參考下吧
    2019-08-08
  • 詳解vue.js的devtools安裝

    詳解vue.js的devtools安裝

    本篇文章主要介紹了詳解vue.js的devtools安裝 ,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • 基于 vue-skeleton-webpack-plugin 的骨架屏實戰(zhàn)

    基于 vue-skeleton-webpack-plugin 的骨架屏實戰(zhàn)

    這篇文章主要介紹了基于 vue-skeleton-webpack-plugin 的骨架屏實戰(zhàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-08-08
  • vue v-on監(jiān)聽事件詳解

    vue v-on監(jiān)聽事件詳解

    這篇文章主要為大家詳細介紹了vue v-on監(jiān)聽事件的相關(guān)資料,Vue.js中的監(jiān)聽事件是如何處理的,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • vue框架實現(xiàn)將側(cè)邊欄完全隱藏

    vue框架實現(xiàn)將側(cè)邊欄完全隱藏

    這篇文章主要介紹了vue框架實現(xiàn)將側(cè)邊欄完全隱藏,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue實現(xiàn)垂直無限滑動日歷組件

    vue實現(xiàn)垂直無限滑動日歷組件

    這篇文章主要為大家詳細介紹了vue實現(xiàn)垂直無限滑動日歷組件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vue頁面堆棧管理器詳情

    Vue頁面堆棧管理器詳情

    這篇文章主要介紹了Vue頁面堆棧管理器
    2021-10-10

最新評論