v-model语法糖

v-model原理

v-model实现双向绑定的语法糖,常用于表单与组件之间的数据双向绑定

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

表单实现双向绑定

  1. 原理
    分两步骤 v-bind绑定一个value属性 v-on指令给当前元素绑定input事件 可看出v-model绑定在表单上时,v-model其实就是v-bind绑定value和v-on监听input事件的结合体
    v-model = v-bind:value + v-on:input
  2. 实现
    用v-bind:value + v-on:input来模拟实现v-model
javascript 复制代码
	<!-- 
      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的双向绑定功能。

组件上的双向绑定

  1. 原理

v-model绑定在组件上的时候做了以下步骤 在父组件内给子组件标签添加 v-model ,其实就是给子组件绑定了 value 属性

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

  1. 实现

父组件操作

javascript 复制代码
<template>
<div class="container">
<!-- v-bind和v-on实现了双向绑定 -->
<!-- <input
      type="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>

子组件

javascript 复制代码
<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>

v-model就实现了双向数据绑定,实际上它就是通过Vue提供的事件机制。即在子组件通过$emit()触发一个事件,在父组件使用v-model即可

相关推荐
cs_dn_Jie8 分钟前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic42 分钟前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿1 小时前
webWorker基本用法
前端·javascript·vue.js
清灵xmf2 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据2 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
334554323 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test3 小时前
js下载excel示例demo
前端·javascript·excel
Yaml43 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事3 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro