1. 程式人生 > >vue遇到過的坑(父元件向輸入框元件傳值進去,然後子元件利用傳進來的資料進行資料繫結的問題與解決方法)

vue遇到過的坑(父元件向輸入框元件傳值進去,然後子元件利用傳進來的資料進行資料繫結的問題與解決方法)

vue.js一大特性是可以實現很多可複用的元件。
我做專案的時候,封裝了一個輸入框元件,然後頁面上所有相同樣式的地方都用這個元件來進行呼叫,剛開始以為實現起來很簡單,作為一個vue剛剛學習的人來說,不就是寫一個單元件,然後各個頁面input的問題嗎,可是實際當我在進行傳值的時候遇到了問題,因為我們傳值過程中,vue一向遵循的是資料耦合,不會去更改兩者之間的資料,vue也提供了報錯,但是在進行父元件傳值到子元件,而且子元件的這個屬性v-model綁定了,當我們在輸入框上改變的值會去更改父元件的值。解決辦法如下
父元件
父元件
子元件

子元件
重點內容
input元件內部維護私有資料,通過computed賦值,watch變化通過$emit通知父元件