vue3.0 ref 获取标签 dom
作者:互联网
简单明了直接上代码
<template>
<div>
<input type="text" ref="inputRef" value="1111" />
<span>123</span>
</div>
</template>
<script>
import { ref, onMounted } from "vue";
export default {
setup() {
const inputRef = ref(null);
onMounted(() => {
console.log(inputRef.value); /** 这是inputDom */
console.log(inputRef.value.value) /** 1111 */
});
return { inputRef };
},
};
</script>
<style></style>
ref的本质是转为reactive
ref(18) 转为 reactive({value:18})
所以取值的时候比以前多一个.value。
setup的执行期间是在 beforeCreate和created之间执行的,而这个时候dom还未被挂载,所以直接在setup中获取dom是不可能成功的,只能在setup的生命周期onMounted及以后获取dom。
标签:dom,setup,inputRef,onMounted,value,vue3.0,ref 来源: https://blog.csdn.net/glorydx/article/details/118526686