v-model原理（应用于组件）

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 绑定数据

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

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

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

② 父组件中： v-model 给组件直接绑数据 ( :value + @input )

1. 表单类基础组件封装思路

① 父传子 ：父组件动态传递 prop 数据， 拆解v-model ，绑定数据

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

本质：实现了实现 子组件 和 父组件数据 的双向绑定

2. v-model 简化代码的核心步骤

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

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

实际工作当中会遇见大量表单内容，为了复用，我们通常会把表单内容封装为组件。

表单类组件封装：

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

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

一旦封装起来，数据应该父组件去提供，因为只有数据在父组件那里，才能进行表单提交。