Vue的父子組件v-model雙向綁定，父組件修改子組件中綁定的v-model屬性

先來看下實現的效果，父組件中有個文本框，在點擊下面按鈕時彈出抽屜，抽屜里也有個文本框，文本框里的初始值要和父組件的文本框同步，並且修改抽屜里的文本框值時 父組件里的文本框值也要跟着改變

網上有大概三種方法

 

1. 父組件調用子組件傳值,子組件通過props接收父組件傳來的值，並通過emit發送方法名和值，父組件根據傳來的方法名定義方法接收值並進行賦值操作。
2. Sync  這個沒試過不了解
3. v-model 

　　子傳父：

　　父組件定義v-model，子組件中當數據更新時，向父組件emit一個input事件，將更新之后的數據傳遞給父組件（無需在父組件里寫方法接收值，V-model自行賦值了）   　　

　　父傳子：

        1、假如子組件中的input元素沒有用v-model綁定，則可以像方法1中一樣子組件定義prop接收值，Input元素 :value綁定prop字段               

   　  2、假如子組件綁定了v-model，父組件不能直接修改子組件v-model的值，會出現報錯或者沒有效果的情況，解決方案是子組件去watch這個model。

我用的第三種方法

由於我子組件是表單，都是由v-model來綁定各個FormItem的值，所以這邊采用父子組件都是v-model的形式來雙向通信

下面貼代碼↓↓↓↓

子組件代碼：

 

 

 

父組件：

 

 

 

 

 

 

 

 

 

 

 

 由於我子組件是v-model綁定的，如果想實現父組件改變子model，子組件能實時接到，必須得由子組件去watch這個model，否則無法產生效果或者會報錯。

 

博主初學vue踩了很多坑，有疑問或是建議歡迎留言探討。

 

參考鏈接：https://yinghecloud.com/research/109

https://segmentfault.com/q/1010000013863503