Vue中如何在組件內部實現一個雙向數據綁定？

假設有一個輸入框組件，用戶輸入時，同步父組件頁面中的數據。

具體思路：父組件通過props傳值給子組件，子組件通過 $emit 來通知父組件修改相應的props值，具體實現如下：

可以看到，當輸入數據時，父子組件中的數據是同步改變的：

我們在父組件中做了兩件事，一是給子組件傳入props，二是監聽input事件並同步自己的value屬性。那么這兩步操作能否再精簡一下呢？答案是可以的，你只需要修改父組件：

 

v-model 實際上會幫我們完成上面的兩步操作。