Vue之2.x版本父子元件雙向繫結事件

昔有木如蓋發表於2017-10-25

以前面試的時候技術很自然的問到你知道vue有什麼特點嗎,那時候沒深入瞭解vue,僅僅是對vue1.0的一些知識學習一點,於是乎順口說vue能雙向繫結資料,現在想想真尷尬啊,vue2.0已經移除了雙向繫結,需要自己動手去實現才行。下面正文:
Vue 2.x相比較Vue 1.x而言,有個比較大的變化就是移除的元件的props的雙向繫結功能。
在Vue1.x中利用props的twoWay和.sync繫結修飾符可以實現props的雙向繫結功能,但在Vue2.x中徹底廢棄了此功能,如果需要雙向繫結需要自己來實現。
在Vue2中元件的props的資料流動為單向,由元件外通過元件的DOM屬性傳遞props給元件內,元件內只能被動接收元件外傳遞過來的資料,並且在元件內,不能修改由外層傳來的props資料。
例如Vue2中雙向繫結父子元件資料,具體參照上一篇子元件–>父元件的bus.$emit()方法,父元件可以通過props來傳遞給子元件dom上狀態的改變,而在子元件中想要改變狀態卻不能直接修改父元件的資料,只能傳遞改變的狀態到父元件,在父元件中由父元件來接收子元件傳來的狀態再進行實現資料改變,從而實現父子元件的狀態雙向繫結

相關文章