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 和事件配置。

相关推荐
独立开阀者_FwtCoder4 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士5 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
南岸月明5 分钟前
不聊主业,聊聊你们眼中的副业是什么样的?
前端
Kevin在掘金9201410 分钟前
c#、.net、Fluent UI Blazor
前端
LovelyAqaurius11 分钟前
RSA加密算法:从数学魔法到现实守护
前端
Hilaku12 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
星语卿13 分钟前
Js事件循环
javascript
datagear13 分钟前
如何在DataGear 5.4.1 中快速制作HTTP数据源服务端分页的数据表格看板
javascript·数据可视化
蛋黄蛋黄16 分钟前
微信表情怎么在自己的项目使用微信表情?-> [开源仓库]wechat-emoji
前端·github
汪子熙17 分钟前
错误剖析:net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK) 的含义与解决之道
前端