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)
    })
  }
})

<div ref="banref"></div>

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>