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