vue中的v-model原理，与组件自定义v-model

Posted 2022-03-09 baikouloser

VUE中的v-model可以实现双向绑定，但是原理是什么呢？往下看看吧

根据官方文档的解释，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输入框输入内容时，会自动的触发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事件，实现了自定义的双向绑定