Vue的指令v-model的原理

2301_796143792024-09-23 10:31

v-model的原理

原理：v-model本质上是一个语法糖。例如应用在输入框上，就是value属性和input事件的合写。

作用：提供数据的双向绑定

数据变，视图跟着变 :value
视图变，数据跟这变 @input

注意：$event用于在模板中获取事件的形参。

vue 复制代码

<template>
	<div id="app">
    	<input v-model="msg" type="text">
    <input :value="msg" @input="msg = $event.target.value" type="text" name="" id="">
  	</div>
</template>

表单类组件封装 & v-model简化代码

表单类组件封装
1. 父传子：数据应该是父组件props传递过来的，v-model拆解绑定数据
2. 子传父：监听输入，子传父传值给父组件修改
父组件（使用）：
vue 复制代码
```
<BaseSelect :cityId="selectId" @事件名="selectId = $event"></BaseSelect>
```
子组件（封装）：
vue 复制代码
```
<select :value="cityId" @chang="handleChange">...</select>
```
vue 复制代码
```
props: {
	cityId: String
},
```
vue 复制代码
```
methods: {
	handleChange (e) {
		this.$emit('事件名', e.target.value)
	}
}
```
父组件v-model简化代码，实现子组件和父组件数据双向绑定。
1. 子组件中：props通过value接收，事件触发input
2. 父组件中：v-model给组件直接解绑数据（:value+@input）
父组件（使用）：
vue 复制代码
```
<BaseSelect v-model="selectId"></BaseSelect>
```
子组件（封装）：
vue 复制代码
```
<select :value="cityId" @chang="handleChange">...</select>
```
js 复制代码
```
props: {
	value: String
},
methods: {
    handleChange (e) {
        this.$emit('input', e.target.value)
    }
}
```