v-model原理

v-model原理

1.原理：

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

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

2.作用：

提供数据的双向绑定

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

3.注意

$event 用于在模板中，获取事件的形参

4.代码示例

<template><div class="app"><input type="text"  /><br /> <input type="text" /></div>
</template><script>
export default {data() {return {msg1: '',msg2: '',}},
}
</script> 
<style>
</style>

5.v-model使用在其他表单元素上的原理

不同的表单元素， v-model在底层的处理机制是不一样的。比如给checkbox使用v-model

底层处理的是 checked 属性和 change 事件。

不过咱们只需要掌握应用在文本框上的原理即可

表单类组件封装

1.需求目标

实现子组件和父组件数据的双向绑定 （实现App.vue中的selectId和子组件选中的数据进行双向绑定）

2.代码演示

App.vue

<template><div class="app"><BaseSelect></BaseSelect></div>
</template><script>
import BaseSelect from './components/BaseSelect.vue'
export default {data() {return {selectId: '102',}},components: {BaseSelect,},
}
</script><style>
</style>

BaseSelect.vue

<template><div><select><option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">广州</option><option value="105">深圳</option></select></div>
</template><script>
export default {
}
</script><style>
</style>

v-model简化代码

1.目标：

父组件通过v-model 简化代码，实现子组件和父组件数据 双向绑定

2.如何简化：

v-model其实就是 :value和@input事件的简写

• 子组件：props通过value接收数据，事件触发 input
• 父组件：v-model直接绑定数据

3.代码示例

子组件

<select :value="value" @change="handleChange">...</select>
props: {value: String
},
methods: {handleChange (e) {this.$emit('input', e.target.value)}
}

父组件

<BaseSelect v-model="selectId"></BaseSelect>