vue3在setup中通过$ref获取dom元素

时间:?2021-10-08阅读:?22标签:?vue3

在使用vue2的时候,我们需要获取dom元素,或者获取组件的相关方法属性,一般都是通过this.$refs[domName]的方式,但是在vue3的setup中是没有this的,那么如何获取$refs呢?


借助 ref() 函数

首先在setup中定义一个ref的变量,然后将该变量挂载到DOM上。

<script setup>
import {ref,onMounted} from 'vue'
let divRef = ref(null);//refs
onMounted(() => {
console.log(divRef.value)
})
</script>
<template> <div class="home">
<div ref="divRef">元素</div>
</div> </template>

ref将setup函数声明的变量变为响应式,包含且仅有一个value属性。

需要注意的是,调用divRef.value是需要在dom渲染后才能获取到,一般在回调的onMounted的方法中访问,在别的地方可以通过nextTick来实现访问,下面简单介绍下nextTick。


nextTick下调用$refs

nextTick将回调推迟到下一个DOM更新周期之后执行。在更改了一些数据以等待DOM更新后立即使用它。

<script setup>
import { ref, nextTick } from 'vue'
let divRef = ref(null);//refs
const init = async ()=> {
await nextTick()
console.log(divRef.value)
}
</script>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.pannellisolari.net/article/detial/10688

Vue.js 3.2 关于响应式部分的优化

Vue 3 正式发布距今已经快一年了,相信很多小伙伴已经在生产环境用上了 Vue 3 了。如今,Vue.js 3.2 已经正式发布,而这次 minor 版本的升级主要体现在源码层级的优化,对于用户的使用层面来说其实变化并不大。

从 Vue3 源码中再谈nextTick

定义: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM,看完是不是有一堆问号?我们从中找出来产生问号的关键词

Vue3 的响应式和以前有什么区别,Proxy 无敌?

大家都知道,Vue2 里的响应式其实有点像是一个半完全体,对于对象上新增的属性无能为力,对于数组则需要拦截它的原型方法来实现响应式。

在Vue3中使元素在滚动视图时淡入

优秀的网站要对用户的互动做出反应。做到这一点的一个很好的方法就是对有人向下滚动你的页面做出反应。除了视差组件和滚动事件外,添加响应式触摸的一种好方法是使元素在滚动视图时淡入。

vue3.x 新特性 - CompositionAPI

安装 vue-cli3,在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装,安装插件后,您就可以使用新的 Composition API 来开发组件了。

Vue3中的Vue Router初探

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。

在Vue2与Vue3中构建相同的组件

Vue 开发团队终于在今天发布了 3.0-beta.1 版本,也就是测试版。通常来说,从测试版到正式版,只会修复 bug,不会引入新功能,或者删改老功能。所以,如果你对新版本非常感兴趣,或者有新项目即将上马,不妨尝试一下新版本

Vue3 项目从零开始搭建项目及插件的使用

vue3.0 出来有段时间,借助年底这段时间不怎忙,摸会鱼,开始学习Vue3。本文主要从项目搭建到项目实战,一步步的学习Vue3 的项目搭建以及一些插件及库的使用,减少入坑。

vue3.0 mixin 混入

首先是官方定义:混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

Vue3 中令人兴奋的新功能

用新的 Vue 3 编写的程序效果会很好,但性能并不是最重要的部分。对开发人员而言,最重要的是新版本将会怎样影响我们编写代码的方式。如你所料,Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是

点击更多...

内容以共享,参考,研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

Baidu