vue 如何取消雙向繫結

2021-09-26 19:49:21 字數 389 閱讀 2927

vue中的雙向繫結,在單頁面中使用起來非常便利,表單資料和物件保持資料一致,但是在某些應用場景下,比如彈窗,我們需要取消雙向繫結功能,否則會出現,當我們修改彈窗資料的時候,父頁面的資料同步修改的現象,本文主要介紹如何取消雙向繫結。

通過 prop 傳遞資料

...

formatgroups(grouplist) else

}

如果使用:groups="form.grouplist",那麼在子元件中修改 grouplist 的值時,會同時修改父頁面中的資料。彈窗單擊取消後,資料無法恢復。

採用上面的方法,一般情況下是可以實現的,但是遇到多級物件時,依然會被雙向繫結,此時,需要用到物件深拷貝,詳見:js物件的深拷貝

如何取消vue的雙向資料繫結

今天在寫功能時用到雙向資料繫結,需求是往乙個陣列裡push乙個viewmodel,當push新的陣列時,陣列的最後乙個元素將取消雙向資料繫結 方法一通過json轉換的方式,用json,對物件進行深拷貝。先上 this.viewmodel let obj json.parse json.stringi...

Vue雙向繫結

把乙個普通物件 a 傳給 vue 例項作為它的 data 選項,vue.js 將遍歷它的屬性,用object.defineproperty 將它們轉為 getter setter,如圖綠色的部分所示。每次使用者更改data裡的資料的時候,比如a.b 1,setter就會重新通知watcher進行變動...

Vue 雙向繫結

在react或者vue這類mvvm框架中使用雙向繫結是很常見的需求,最近專案中在使用vue,今天來談一談vue中雙向繫結的實現。先來說幾句廢話 什麼是雙向繫結?把model中的資料繫結到view中,然後更新model時view會自動跟新,這叫單向繫結,而當使用者改變view時model中資料也能自動...