09丨雙向繫結和單向資料流不衝突

2022-01-19 05:42:35 字數 1333 閱讀 8354

這是乙個個人資訊的demo

輸入手機號和郵編

這是兩個元件,兩種不同的寫法

第一種是通過v-model進行的雙向繫結

第二種是屬性的傳遞,事件的**。去做資料的更新。

實際上v-model的形式,就是我們第二種方式,最終編譯出來的效果。

所以v-model僅僅是語法糖而已。

有時候乙個元件需要多個屬性的雙向繫結,vue給我們預留了api。通過.sync的形式。可以對其他的屬性去做雙向繫結。

.sync其實下面這種:zipcode這樣的一種形式去傳遞去改變值,

子元件更新的時候也是通過this.$emit 觸發事件這樣去做的。

v-model用的是@change

為什麼是@change呢?實際上是我們子元件自己定義的

正常情況下vue預設的是input事件

對於屬性預設的是value

如果你需要自定義,例如這裡我們要對phoneinfo做雙向繫結,那我可以在model中主動的宣告。宣告我這個屬性要的是phoneinfo然後事件是用的change,這樣我們的雙向繫結就是按照機制去來的。

最終的語法糖的形式

v-model對應的是前兩個

.sync對應的是後面兩個。

vue 單向資料流 雙向繫結

在react中是單向資料繫結,而在vue中的特色是雙向資料繫結。但是其實就我個人的理解是 其實無論是vue還是react其實還是提倡單向資料流去管理狀態,這一點在vuex和redux狀態管理器上體現的很明顯。只是vue為ui控制項提供了雙向資料繫結的方式,在一些需要實時反應使用者輸入的場合會非常方便...

vue資料的雙向繫結和單向資料流

先看要實現的效果 再貼 lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle head type text id inp oninput changevalue v...

React的單向資料流與Vue的雙向繫結

小結 react遵循從上到下的資料流向,即單向資料流。1 單向資料流並非 單向繫結 甚至單向資料流與繫結沒有 任何關係 對於react來說,單向資料流 從上到下 與單一資料來源這兩個原則,限定了react中要想在乙個元件中更新另乙個元件的狀態 類似於vue的平行元件傳參,或者是子元件向父元件傳遞引數...