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即可

相关推荐
走,带你去玩1 小时前
vue2.0 luoyi框架 代码漏洞检查问题
vue
nothing_more_than1 小时前
draggable的el-dialog实现对话框标题可以选择
javascript·vue.js·element-plus
小镇程序员2 小时前
vue2 src自定义事件
前端·javascript·vue.js
炒毛豆3 小时前
vue3+echarts+ant design vue实现进度环形图
javascript·vue.js·echarts
LL.。4 小时前
vue3项目部署在阿里云轻量应用服务器上
阿里云·云计算·vue
阿铎前端4 小时前
Three.js 相机控制器Controls
vue·three.js
nameofworld4 小时前
前端面试笔试(六)
前端·javascript·面试·学习方法·递归回溯
前端fighter5 小时前
js基本数据新增的Symbol到底是啥呢?
前端·javascript·面试
流着口水看上帝5 小时前
JavaScript完整原型链
开发语言·javascript·原型模式
guokanglun5 小时前
JavaScript数据类型判断之Object.prototype.toString.call() 的详解
开发语言·javascript·原型模式