vue prop單向資料流

2021-10-13 10:06:07 字數 753 閱讀 5900

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

【例1】

}

vue.component('son-cmp', }

`})const vm = new vue(

})

【注】常見試圖改變prop的情況

1. 用 prop 來傳遞乙個初始值

這個子元件接下來希望將其作為乙個本地的prop資料來使用,在後續操作中,會將這個值進行改變。在這種情況下,最好定義乙個本地的data屬性,並將這個prop用作其初始值

vue.component('son-cmp', 

},template: `

son:}`

})const vm = new vue(

})

2. prop作為原始值傳入且需要進行轉換

在這種情況下,最好使用這個prop的值來定義乙個計算屬性

vue.component('son-cmp', 

},template: `

son:

}`})

const vm = new vue(

})

單向資料流

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 ...

單向資料流

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