v-model双向绑定原理解析

v-model 是 Vue.js 中用于实现表单元素和数据之间双向绑定的指令。其工作原理如下:

1. 基本概念

v-model 将表单元素的 value 属性与 Vue 实例的数据属性绑定,并在输入时自动更新数据。

2. 实现原理

v-model 本质上是语法糖,结合了 v-bindv-on

  • v-bind: 将数据绑定到表单元素的 value 属性。
  • v-on: 监听输入事件,更新数据。

例如:

ini 复制代码
<input v-model="message">

等价于:

ini 复制代码
<input :value="message" @input="message = $event.target.value">

3. 不同表单元素的处理

v-model 会根据不同的表单元素自动适配:

  • 文本输入框 ( <input type="text"> ) : 使用 value 属性和 input 事件。
  • 复选框 ( <input type="checkbox"> ) : 使用 checked 属性和 change 事件。
  • 单选按钮 ( <input type="radio"> ) : 使用 checked 属性和 change 事件。
  • 下拉菜单 ( <select> ) : 使用 value 属性和 change 事件。

4. 自定义组件中的 v-model

在自定义组件中,v-model 默认使用 value 作为 prop,input 作为事件。可以通过 model 选项自定义 prop 和事件名。

例如:

ini 复制代码
Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
  `
});

5. Vue 3 中的变化

Vue 3 中,v-model 的默认 prop 改为 modelValue,事件改为 update:modelValue,并支持多个 v-model 绑定。

例如:

ini 复制代码
app.component('custom-input', {
  props: ['modelValue'],
  template: `
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  `
});

总结

v-model 通过 v-bindv-on 实现双向绑定,自动适配不同表单元素,并在自定义组件中提供灵活的 prop 和事件配置。

相关推荐
灵感__idea4 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴5 小时前
Mix
前端·webgl
代码续发5 小时前
前端组件梳理
前端
试图让你心动6 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_6 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码6 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记6 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏6 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数7 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante7 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端