單向資料流

2022-10-11 17:18:13 字數 908 閱讀 8469

所有的 prop 都使得其父子 prop 之間形成了乙個單向下行繫結:父級 prop 的更新會向下流動到子元件中,但是反過來則不行。這樣會防止從子元件意外變更父級元件的狀態,從而導致你的應用的資料流向難以理解。

額外的,每次父級元件發生變更時,子元件中所有的 prop 都將會重新整理為最新的值。這意味著你應該在乙個子元件內部改變 prop。如果你這樣做了,vue 會在瀏覽器的控制台中發出警告。

這裡有兩種常見的試圖變更乙個 prop 的情形:

這個 prop 用來傳遞乙個初始值;這個子元件接下來希望將其作為乙個本地的 prop 資料來使用。

在這種情況下,最好定義乙個本地的 data property 並將這個 prop 用作其初始值:

props: ['initialcounter'],

data: function ()

}

這個 prop 以一種原始的值傳入且需要進行轉換。在這種情況下,最好使用這個 prop 的值來定義乙個計算屬性:

props: ['size'],

computed:

}

警告
注意在 j**ascript 中物件和陣列是通過引用傳入的,所以對於乙個陣列或物件型別的 prop 來說,在子元件中改變變更這個物件或陣列本身將會影響到父元件的狀態。

單向資料流

props是單向繫結的,當父元件的屬性變化時,將傳導給子元件,但是不會反過來 而且不允許子元件直接修改父元件中的資料,報錯 解決方式 方式1 如果子元件想把它作為區域性資料來使用,可以將資料存入另乙個變數中再操作,不影響父元件中的資料 方式2 如果子元件想修改資料並且同步更新到父元件,兩個方法 a....

單向資料流

doctype html html lang en head meta charset utf 8 title vue title script src bower components vue dist vue.js script head body div id box aaa aaa div ...

vue prop單向資料流

所有的 prop 都使得其父子 prop 之間形成了乙個單項下行繫結 父級 prop 的更新會向下流動到子元件中,但是反過來則不行,如 例1 這樣會防止子元件意外改變父級元件的狀態,從而導致應用的資料流向難以理解。例1 vue.component son cmp const vm new vue 注...