【Vue3】获取DOM节点的几种方式

1 .原生js获取 DOM 节点:

document.querySelector(选择器)
document.getElementById(id选择器)
document.getElementsByClassName(class选择器)
....

2. vue2中获取当前组件的实例对象:

因为每个 vue 的组件实例上,都包含一个 $refs 对象,里面存储着对应的 DOM 元素或组件的引用。所以在默认情况下, 组件的 $refs 指向一个空对象 。

可以先在组件上加上 ref="名字" ,然后通过 this.$refs.名字 获取相应元素并进行操作。


 

3.vue3中获取当前组件的实例对象:

 在Vue3框架里面是解除了this这个对象,所以无法使用this.$refs的方式获取自定义组件 ref 的DOM节点。

但是vue3中自带了能返回当前组件实例对象的函数 getCurrentInstance,通过该函数获取对象节能看到该对象包含界面中的refs。




你可能感兴趣的:(前端,笔记,前端,javascript,开发语言)