【vue2】12.进阶语法
目录
v-model 原理
原理：v-model本质上是一个语法糖。例如应用在输入框上，就是 value属性 和 input事件 的合写。
作用：提供数据的双向绑定
- ① 数据变，视图跟着变 :value
- ② 视图变，数据跟着变 @input
注意：$event 用于在模板中，获取事件的形参
表单类组件封装 & v-model 简化代码
1. 表单类组件 封装 → 实现 子组件 和 父组件数据 的双向绑定
- ① 父传子：数据 应该是父组件 props 传递 过来的，拆解 v-model 绑定数据
- ② 子传父：监听输入，子传父传值给父组件修改
表单类组件封装 & v-model 简化代码
2. 父组件 v-model 简化代码，实现 子组件 和 父组件数据 双向绑定
- ① 子组件中：props 通过 value 接收，事件触发 input
- ② 父组件中：v-model 给组件直接绑数据
1. 表单类基础组件封装思路
- ① 父传子：父组件动态传递 prop 数据，拆解v-model，绑定数据
- ② 子传父：监听输入，子传父传值给父组件修改
本质：实现了实现 子组件 和 父组件数据 的双向绑定
2. v-model 简化代码的核心步骤
- ① 子组件中：props 通过 value 接收，事件触发 input
- ② 父组件中： v-model 给组件直接绑数据
.sync 修饰符
作用：可以实现 子组件 与 父组件数据 的 双向绑定，简化代码
特点：prop属性名，可以自定义，非固定为 value
场景：封装弹框类的基础组件， visible属性 true显示 false隐藏
本质：就是 :属性名 和 @update:属性名 合写
ref 和 $refs
作用：利用 ref 和 $refs 可以用于 获取 dom 元素, 或 组件实例
特点：查找范围 → 当前组件内 (更精确稳定)
① 获取 dom：
1. 目标标签 – 添加 ref 属性
2. 恰当时机, 通过 this.$refs.xxx, 获取目标标签
② 获取组件：
1. 目标组件 – 添加 ref 属性
2. 恰当时机, 通过 this.$refs.xxx, 获取目标组件，
就可以调用组件对象里面的方法
Vue异步更新、$nextTick
需求：编辑标题, 编辑框自动聚焦
- 点击编辑，显示编辑框
- 让编辑框，立刻获取焦点
问题："显示之后"，立刻获取焦点是不能成功的！
原因：Vue 是 异步更新 DOM (提升性能)
$nextTick：等 DOM 更新后, 才会触发执行此方法里的函数体
语法: this.$nextTick(函数体)
- 1. Vue是异步更新 DOM 的
- 2. 想要在 DOM 更新完成之后做某件事，可以使用 $nextTick
原文地址：https://blog.csdn.net/2301_81051419/article/details/143672056
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！