vue中的v-model原理，與組件自定義v-model

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

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

// 標准寫法
<input v-model="name">

// 等價於
<input :value="name" @input="name = $event.target.value">

// 在組件上面時
<div :value="name" @input="name = $event"></div>

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

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

根據上面的原理，vue就通過v-model實現雙向數據綁定

 

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

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

// AddPrice.vue
// 通過props接受綁定的value參數
<template>
  <div @click="$emit('input',value + 100 )">點擊加錢<div>
</template>

<script>
  export default {
    props: ['value']
  }
    
</script>

// 在父組件中調用
<add-price v-model="price"></add-price>

組件中使用props接受傳入的參數值value, 組件點擊事件觸發並 使用$emit調用父組件上的input事件，實現了自定義的雙向綁定