vue資料間prop的雙向資料繫結

2021-07-25 15:36:02 字數 510 閱讀 9309

在vue的官方文件中有這麼一句話,,prop例項的作用域,是孤立的,這意味著不能並且不應該在子元件的模板內直接引用父元件的資料,可以使用props把資料傳給子元件

prop 是單向繫結的,當傅祖建的屬性變化的時候,將傳導給子元件,但是不會反過來,這是為了防止子元件無意改變父元件的狀態--這會讓應用的資料流難以理解

另外,每次父元件更新時,子元件的所有prop都會更新為最新值,這意味著你不應該在子元件內部改變prop,如果你這麼做了,vue會在控制台給出警告

通常改變prop的情況:

1 prop作為初始值傳入,子元件之後只是將它的初始值作為本地資料的初始值使用

2 prop 作為需要被轉變的原始值傳入

說白了就是最好不要使用prop的雙向資料繫結會導致資料狀態不好管理 實在想用也行,必須滿足以下條件

1 元件內部需要修改props

2 元件需要可以由外部在執行時動態控制,而非單純初始化

3 元件外部需要讀取元件內的狀態來進行處理

為此找了乙個好的外掛程式 

vue元件 Prop傳遞資料

元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的props選項。prop 是單向繫結的 當父元件的屬性變化時,將傳導給子元件,但是不會反過來。這是為了防止子元件無意修改了父元件的狀態。每次父元件更新時,子元件的所...

vue的雙向資料繫結

原理 vue實現雙向資料繫結的原理就是利用了 object.defineproperty 這個方法重新定義了物件獲取屬性值 get 和設定屬性值 set 的操作來實現的。它接收三個引數,要操作的物件,要定義或修改的物件屬性名,屬性描述符。重點就是最後的屬性描述符。屬性描述符是乙個物件,主要有兩種形式...

Vue 的雙向資料繫結

model 如何改變view 從model 到view 的對映 data binding 這樣可以大量節省你人肉來update view的 view 又是如何改變model 的 從view 到 model 的事件監聽 dom listeners 這樣你的model 會隨著view觸發事件而改變 資料...