黑马程序员技术交流社区

标题: 【上海校区】vue中的v-model原理 [打印本页]

---

作者: 依惜    时间: 2020-3-19 09:46
标题: 【上海校区】vue中的v-model原理


                                    VUE中的v-model可以实现双向绑定，但是原理是什么呢？
v-model其实是一个语法糖，它会自动的在元素或者组件上面解析为 :value="" 和 @input=""， 就像下面这样
1 // 标准写法
<input v-model="name">
2// 等价于
<input :value="name" @input="name = $event.target.value">
3// 在组件上面时
<div :value="name" @input="name = $event"></div>
1.当在input输入框输入内容时，会自动的触发input事件，更新绑定的name值。
2.当name的值通过JavaScript改变时，会更新input的value值
根据上面的原理，vue就通过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事件，实现了自定义的双向绑

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2