Vue ref 和 $refs 获取元素宽高

Vue3当中获取

方法一：借助 ref() 函数 (推荐)
<div ref="box">我是div
</div>import { ref,onMounted } from 'vue'setup() {
let box = ref(null)
onMounted(()=>{console.log(box);//得到一大堆元素属性console.log(box.value) // <div>我是div</div>console.log(box.value.offsetHeight) //取元素宽高等属性操作
})return{box}
}方法二：找到 this
通过 getCurrentInstance() 可以获得 vue 实例对象。我们稍微改造下上文的代码
<template><div ref="divRef" />
</template>注意，使用 getCurrentInstance 是有一些限制的，
getCurrentInstance 只能在 setup 或生命周期钩子中调用。import { defineComponent, getCurrentInstance, onMount } from 'vue'defineComponent({setup() {onMount(() => {console.log(getCurrentInstance().ctx.$refs.divRef)})}
})

let banref = ref('')

Vue2 快速获取节点demo

this.$refs['input1'].value 这个写法推荐

<div ref="div1">123</div>
<input type="text" value="123" ref="input1" id="input1">console.log(this.$refs.div1)//<div>123</div>console.log(this.$refs.input1.value)//123
console.log(document.getElementById('input1'))//<input type="text" id="input1">这两种方法获得的都是Dom节点，而$refs相对document.getElementById的方法，
会减少获取dom节点的消耗。

1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

获取子组件中的data

子组件

<template><div>{{ msg }}</div>
</template><script>
export default {data() {return {msg: "hello world"}}
}
</script>

父组件

<template><div id="app"><HelloWorld ref="hello"/><button @click="getHello">获取helloworld组件中的值</button></div>
</template><script>
import HelloWorld from "./components/HelloWorld.vue";export default {components: {HelloWorld},data() {return {}},methods: {getHello() {console.log(this.$refs.hello.msg)}}
};
</script>

Vue ref 和 $refs 获取元素宽高相关推荐

vue 获取元素宽高
vue 获取元素宽高 vue 中获取组件宽高分两种情况: 1.获取普通组件宽高,直接使用 $refs 即可 2.获取子组件宽高,需使用 $refs.$el 子组件 <template>&l ...
jquery获取元素宽高
前言 jquery获取元素宽高 <!DOCTYPE html> <html lang="zh" > <head><meta charset ...
微信小程序view动态长度_微信小程序实现动态获取元素宽高的方法分析
本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuer ...
如何通过JS获取元素宽高
方法一:DOM节点.offsetWidth/offsetHeight 作用:获取到的是内容区域(content) + 内边距(padding) + 边框(border)的值,输出一个数字. <s ...
原生js获取html元素高度,原生JS获取元素宽高实践详解
开篇的话任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才 ...
微信小程序获取页面元素高度_微信小程序之动态获取元素宽高
我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...
小程序组件获取元素宽高失效和canvas绘制问题
解决办法: 在自定义组件内获取必须用SelectorQuery.in() Component({lifetimes: {ready() {const query = wx.createSelector ...
dom操作获取盒子宽高位置的三种方法,offset/scroll/client三大家族使用详解(附源码及注释)
结论:页面body的高度==视口的高度+滚动条滚动的距离. 这是一个恒等式,看完本篇博客,你将了解offset/scroll/clent三大事件获取宽高位置的具体含义,运用所学内容可以推导出这样的恒等 ...
jquery获取设置元素宽高位置height()、width()、offset()、position()、scrollTop()、scrollLeft()
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-style样式操作全解 jquery获取设置元素宽高位置 jquery的通过height().width().offset().positi ...

Vue ref 和 $refs 获取元素宽高

获取子组件中的data

Vue ref 和 $refs 获取元素宽高相关推荐

最新文章

热门文章