13 $refs和$nextTick使用

最新推荐文章于 2024-07-23 21:45:00 发布

喵喵酱仔__

最新推荐文章于 2024-07-23 21:45:00 发布

阅读量99

点赞数

分类专栏： # vue基本知识文章标签： vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/qq_38210427/article/details/129399571

版权

vue基本知识专栏收录该内容

26 篇文章 0 订阅

订阅专栏

一 $ref

1.1 在vue 中获取真实的DOM元素

Vue中如何获取原生DOM呢?
用id属性或者ref属性都可以

两种方式都能获得dom元素，没有区别

1.2再vue中获取组件对象

1 如何获取组件对象呢?
目标组件添加ref属性
this.$refs.名字 获取组件对象

2 拿到组件对象能做什么?
调用组件里的属性/方法

二$nextTick

问题: data数据改变, 马上获取DOM里的内容如何写?

目标：等DOM更新后, 触发此方法里函数体执行

⚫ 语法: this.$nextTick(函数体)

data改变更新DOM是同步还是异步的?
异步

我们可以在哪里访问到更新后的DOM呢?
this.$nextTick里的函数体
updated生命周期钩子函数

虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。比如你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。