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事件
表单实现双向绑定

表单实现双向绑定

原理
分两步骤 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

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的双向绑定功能。

组件上的双向绑定

原理

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

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

实现

父组件操作

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