Vue ref 和 $refs 获取元素宽高
快速获取节点demo<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.inp...
·
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>
更多推荐
已为社区贡献1条内容
所有评论(0)