VUE中的v-model可以實現(xiàn)雙向綁定，但是原理是什么呢？往下看看吧

根據(jù)官方文檔的解釋，v-model其實是一個語法糖，它會自動的在元素或者組件上面解析為 :value="" 和 @input=""， 就像下面這樣

1 // 標準寫法 2 <input v-model="name"> 3 4 // 等價于 5 <input :value="name" @input="name = $event.target.value"> 6 7 // 在組件上面時 8 <div :value="name" @input="name = $event"></div>

1.當在input輸入框輸入內容時，會自動的觸發(fā)input事件，更新綁定的name值。

2.當name的值通過JavaScript改變時，會更新input的value值

根據(jù)上面的原理，vue就通過v-model實現(xiàn)雙向數(shù)據(jù)綁定

?

看了前面的解釋，對于v-model有了一定的理解。下面我們就來實現(xiàn)自己組件上面的v-model吧

需求：實現(xiàn)一個簡單的點擊按鈕，每次點擊都自動的給綁定值price加100。 組件名為?AddPrice.vue

// AddPrice.vue // 通過props接受綁定的value參數(shù) <template><div @click="$emit('input',value + 100 )">點擊加錢<div> </template><script>export default {props: ['value']}</script>// 在父組件中調用 <add-price v-model="price"></add-price>

組件中使用props接受傳入的參數(shù)值value, 組件點擊事件觸發(fā)并 使用$emit調用父組件上的input事件，實現(xiàn)了自定義的雙向綁定

?

?

　　

轉載于:https://www.cnblogs.com/baikouLoser/p/11122406.html

《新程序員》：云原生和全面數(shù)字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的vue中的v-model原理，与组件自定义v-model的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。