v-model应用在组件上

目录

v-model应用到表单组件

简写

---

v-model 原理

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

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

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

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

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

v-model应用到表单组件

1.表单类组件 封装→实现子组件和父组件数据的双向绑定

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

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

App.vue

HeaderComp.vue

简写

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

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

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

App.vue

HeaderComp.vue