位置: IT常识 - 正文
Vue ref获取元素和组件实例(vue ref获取元素高度)
发布时间：2024-01-14推荐整理分享Vue ref获取元素和组件实例(vue ref获取元素高度)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue3 ref获取元素,vue获取ref添加样式,vue3 ref获取元素,vue3 ref获取元素,vue ref获取元素高度,vue3 ref获取元素,vue ref获取元素高度,vue ref获取元素高度,内容如对您有帮助，希望把文章链接给更多的朋友！
获取元素还不简单？直接document.querySelector(“#id”)不就获取到了吗？例如下面的代码。在写Vue的过程中，我们从来不会写这种代码，但是下面的代码在vue里面是可以运行的。
methods:{ getEl(){ let title= document.querySelector(".title") } }绝大部分时间我们都是通过mustache语法来直接响应式更新数据，根本就不需要先找到具体的元素。但有时候，我们就想要获取某个元素，可以通过ref属性获取具体元素。
第一步：添加ref属性,并取名字。
<template> <h1 ref="title" class="title">Hello</h1></template>
第二步：通过$ref就可以获取到元素了。
mounted() { console.log(this.$refs.title) }ref="title"这里面的名字是随便取的，不需要和class的名字一样。
ref的使用时机我们很少去获取元素的，因为根本不需要，我们只需要修改数据让vue自动帮我们更新UI就行。只有一些特殊场景可能会用到，比如我写的是一个代码编辑器或者实现一些生成代码的功能的时候。 比较有用的是ref也可以获取组件实例。
获取组件实例获取组件实例后，我们是可以调用组件的方法的，这个还是有点用的。 我们写一个Banner.vue并把它引用到App.vue。 Banner.vue的template：
<template> <div class="banner"> <h1>banner</h1> </div></template>在Banner.vue定义一个方法
methods:{ showBanner(){ console.log("showBanner") } }我们可以通过ref和$ref获取到对应的banner组件，并且可以调用对应的方法。
<template> <banner ref="banner"/></template> mounted() { //组件实例代理对象 console.log(this.$refs.banner) //调用组件方法 this.$refs.banner.showBanner() //组件元素 console.log(this.$refs.banner.$el) }这是获取到的代理对象，里面有showBanner方法，可以证明，这个就是Banner的代理对象。 紧接着我们调用的showBanner()方法也输出了内容。 最后，获取到了banner组件的顶层元素。 如果只有一个顶层元素，那么this.refs.banner.refs.banner.refs.banner.el会直接获取顶层元素，如果有多个元素，那么会获取第一个node节点，一般是#text,也就是换行。
上一篇：三维重建(单目、双目、多目、点云、SFM、SLAM)(单图像三维重建)
下一篇：使用axis调用WebService，Java WebService调用工具类(客户端调用axis1.4的方式)
