当前位置：首页 > news >正文

v-model语法糖

news 2025/6/30 7:22:27

v-model原理

v-model实现双向绑定的语法糖，常用于表单与组件之间的数据双向绑定v-model本质上是 value属性和input事件的一层包装
v-model的作用：提供数据的双向绑定数据发生了改变，页面会自动变 v-bind:value页面输入改变 ， 数据会自动变化 v-on:input
v-model是语法糖， v-model等价于 给一个input框提供了 :value属性以及 @input事件
表单实现双向绑定

表单实现双向绑定

原理
分两步骤 v-bind绑定一个value属性 v-on指令给当前元素绑定input事件可看出v-model绑定在表单上时，v-model其实就是v-bind绑定value和v-on监听input事件的结合体
v-model = v-bind:value + v-on:input
实现
用v-bind:value + v-on:input来模拟实现v-model

	<!-- 1.v-model = "msg"(1)data中的数据变化,表单的值也会变化     :value="msg"(2)表单的值发生变化,data中的数据也会变化  @input="msg=$event.target.value"--><input type="text" v-model="name" /><!-- 这种写法与上面写法功能一致 --><input type="text" :value="name" @input="name= $event.target.value" /><!-- 这种写法也与上面写法一致 --><input type="text" :value="name" @input="inputFn" />

例子解释：通过 v-bind:value 绑定 name变量，每次输入内容的时候触发input事件通过事件对象参数 event.target.value 获得输入的内容，并且把这个内容赋值给msg此时更改name时input输入框会变化，更改input输入框时name变量会变，从而实现了v-model的双向绑定功能。

组件上的双向绑定

原理

v-model绑定在组件上的时候做了以下步骤在父组件内给子组件标签添加 v-model ，其实就是给子组件绑定了 value 属性
子组件内使用 prop 创建创建 value 属性可以拿到父组件传递下来的值，名字必须是 value。子组件内部更改 value的时候，必须通过 $emit 派发一个 input 事件，并携最新的值 v-model 会自动监听 input事件，把接收到的最新的值同步赋值到 v-model 绑定的变量上

实现

父组件操作

<template>
<div class="container">
<!-- v-bind和v-on实现了双向绑定 -->
<!-- <inputtype="text"v-bind:value="name"v-on:input="name= $event.target.value"/> --><!-- 等同于 --><!-- <input type="text" :value="name" @input="name= $event.target.value" /> --><!-- v-model是v-bind和v-on的语法糖，即，v-model算是v-band和v-on的简洁写法。 --><!-- <input type="text"  v-model="name" /> --><!-- 在使用中组件 --><Child v-model="name"></Child><!-- 等同于 --><!-- <Child v-bind:value="name"  v-on:input="input"></Child> --><!-- 等同于 --><!-- <Child :value="name" @input="input"></Child> --></div><template>
// 引入组件
import Child from "./components/child";
export default {// 注册组件components: {Child},data() {return {name: "haha"};},methods: {input(data) {console.log(data);this.name= data;}}
};
</script>

子组件

<template><!-- 2. 监听 input 事件的出发 --><input type="text" :value="name" @input="input" /></template>
<script>
export default {// 1. 接受父级传递的值props: {value: {type: String,default: ""}},methods: {input(event) {this.$emit("input", event.target.value);}}
};
</script>