v-model 原理

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

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

① 数据变，视图跟着变 :value

② 视图变，数据跟着变 @input

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

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

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

1. 表单类组件 封装

① 父传子： 数据 应该是父组件 props 传递 过来的， 拆解 v-model 绑定数据

② 子传父： 监听输入，子传父传值给父组件修改

 

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

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

① 子组件中：props 通过 value 接收 ，事件触发 input

② 父组件中： v-model 给组件直接绑数据