父子組件實現數據雙向綁定
props 單向數據流 父 ==> 子
使用v-model 原理是value屬性和input事件
+ 實現步驟:
- 1. 在父組件中注冊子組件並使用
- 2. 在子組件上使用v-model=父組件data值
- 3. 在子組件中使用props屬性接收一個value屬性
- 4. 在子組件中data定義一個臨時變量(目的是存放value的值)
- 5. 在子組件中使用watch監聽value的值,當value的值修改時將最新的值賦值給臨時變量
- 6. 在子組件中使用watch監聽臨時變量的值,當臨時變量的值修改時將最新的值使用this.$emit('input', val) 觸發input事件
- 7. 這樣操作就可以實現父子組件的數據雙向綁定