vue父子組件的雙向綁定


在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)}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM