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

相关推荐
snakeshe10102 分钟前
深入理解useState:批量更新与非函数参数支持
前端
windliang2 分钟前
Cursor 排查 eslint 问题全过程记录
前端·cursor
boleixiongdi3 分钟前
# Bsin-App Uni:面向未来的跨端开发框架深度解析
前端
G等你下课6 分钟前
AJAX请求跨域问题
前端·javascript·http
前端西瓜哥7 分钟前
pixijs 的填充渲染错误,如何处理?
前端
阑梦清川7 分钟前
Java后端项目前端基础Vue(二)
vue.js
snakeshe10107 分钟前
6-1. 实现 useState
前端
呆呆没有脑袋9 分钟前
深入浅出 JavaScript 闭包:从核心概念到框架实践
前端
snakeshe101010 分钟前
用100行代码实现React useState钩子:多状态管理揭秘
前端
爱编程的喵11 分钟前
JavaScript闭包深度解析:从作用域到实战应用
前端·javascript