vue学习day08-v-model详解、sync修饰符、ref和$refs获取dom组件、Vue异步更新和$nextTick

25、v-model详解

（1）v-model原理

1）原理:

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

2）作用

①数据变，视图变

②视图变，数据变

注：在模版中，$event用于获取时间的形参

3）示例：

（2）表单类组件封装与v-model简化代码

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

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

简言之：利用父子通信实现v-model的效果（子组件不能使用v-model，因为数据是父组件的）

3）示例

初始：

①父传子

效果：

②子传父

初始（续上）：

结果：

（3）父组件使用v-model简化代码，实现父组件和子组件数据的双向绑定

1）子组件中：props通过value进行接收，事件触发input

2）父组件中：v-model给组件直接绑数据（:value+@input）

原来：

用v-model：

3）效果（和原来一样，代码用v-model进行简化）：

26、sync修饰符

（1）作用：可以实现子组件与父组件数据的双向绑定，简化代码

（2）特点：prop属性名，可以自定义，非固定值value

（3）适用场景：封装弹框类的基础组件，visible属性，true显示，false隐藏

（4）本质：:属性名+@update:属性名的合写

（5）示例：

1）父传子

父组件：

2）子传父

子组件：

父组件：

③效果：

27、ref和$refs获取dom组件

（1）作用：利用ref和$refs可以用于获取dom元素，或组件实例

（2）特点：查找范围，当前组件内（更精确稳定）

（3）语法：

1）获取dom：

①给目标标签添加ref属性

②恰当时机，通过this.$refs.属性名，获取目标标签

2）获取组件

①给目标标签添加ref属性

②恰当时机，通过this.$refs.属性名，获取目标组件，就可以调用组件里的方法

③示例：

父组件通过ref属性获取子组件的值，并重置其值

代码：

结果：

获取：

28、Vue异步更新和$nextTick

（1）要点：通过$nextTick解决Vue异步更新问题

（2）示例：

点击之后，改变为输入框，并获取焦点

——>

源代码：

1）直接使用this.&refs.ipt添加焦点，发现不仅未获取焦点，并报错（Vue异步更新，dom更新未完成）

2）使用setTimeout,可以解决问题，但时间估计不一定准确

3）使用 this.$nextTick,发现几乎没有延迟