在vue中,子組件和父組件的值要實現雙向綁定
首先要知道:
1.父組件的值發生變動會直接影響到使用該值的子組件
2.子組件無權改變props里面的值,僅有使用權限
解決思路為:
1.根據v-model自定義語法糖
2.在子組件中用value屬性監聽僅使用props中的值,再實時監聽值去調用父組件的方法改變父組件的值
最終實現:
1.子組件中<input :value='父組件的值' @input='監聽輸入事件'> props:['父組件的值']
2.子組件 監聽輸入事件=(e)=>{this.$emit('父組件的方法',e.target.value)}
3.父組件中 <子組件 父組件的值='父組件的值' @父組件的方法="父組件的值=$event"></子組件>
簡化:
在新的vue版本中,vue簡化了父子組件雙向綁定中父組件要做的事情,如下:
1.父組件中綁定的方法改為 <子組件 父組件的值.sync='父組件的值'></子組件>
2.子組件中<input :value='父組件的值' @input='監聽輸入事件'> props:['父組件的值']
3.子組件 監聽輸入事件=(e)=>{this.$emit('update:父組件的值',e.target.value)}
