网站建设课程设计格式,黄页88网官网电话,建材在线,必应搜索引擎【v-model进阶】
可以实现双向数据绑定#xff1a; 数据变了#xff0c;视图跟着变#xff0c; 视图变了#xff0c;数据跟着变
原理#xff1a; v-model只是个语法糖#xff0c;作用在原生输入框input上#xff0c;本质是给input传了一个value属性#xff0c; 并监…【v-model进阶】
可以实现双向数据绑定 数据变了视图跟着变 视图变了数据跟着变
原理 v-model只是个语法糖作用在原生输入框input上本质是给input传了一个value属性 并监听input事件 拿到了输入框的值 数据一变 就去影响了视图的更新
下面这两个本质上可以划等号 【v-model用在组件上】
v-model除了用在表单元素上, 还可以用在组件上, 实现数据的双向绑定 【简化代码】
子组件接收数据的方式还是太复杂了 可以使用 defineModel() 进行简化上述代码 用defineModel() 接收父传子的v-model数据 defineModel() 返回一个ref响应式数据 该数据的初始值与父传子的v-model数据相同
并且 该数据可读可写 子组件可直接修改 修改后的数据会直接同步到父组件数据中 【ref】
这里指的是作用在标签上的ref属性 而不是之前了解到的ref函数
ref 可以用于 获取原生DOM元素 或 组件实例 进而调用组件提供的方法 上图中 通过ref拿到了DOM元素 就可以根据DOM元素进行二次样式的修改
【调用组件方法】 【nextTick】
vue3提供的一个方法
当代码中响应式数据变了 想获取到更新后的DOM如果用之前的方法是拿不到的 这是因为DOM的更新是异步的 因此需要nextTick方法 把代码写在这个方法的回调中 该代码可以实现需求 点击编辑显示编辑框 随后让编辑框立刻获取焦点
