请问 vue3 这样的写法,怎样获取元素 dom?

import { ref, onMounted  } from 'vue'
    
const myRef = ref(null);

onMounted(() => {
    console.log(myRef.value);
})

阅读 4.2k
6 个回答

<div ref="myRef"> ... </div>

image.png

还有一个方法
dom传入ref属性支持传入方法,然后进行赋值

<div :ref="(dom) => myRef=dom"> ... </div>

你如果不行,请把代码贴出来(在线平台上,比如 codepen、codesandebox等)

问题中的 ref 应该是指 template ref,在 composition-api 中使用步骤如下:

  1. 在模板中给元素设置 ref 属性;
  2. 在 script 中声明同名 ref,初始值为 null
  3. 在 onMounted 声明周期钩子中读取

看题中描述你可以检查第一步与第二步,这是 vue3 文档给出的例子:

<script setup>
import { ref, onMounted } from 'vue'

// 声明一个 ref 来存放该元素的引用
// 必须和模板 ref 同名
const input = ref(null)

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="input" />
</template>

文档链接:https://staging-cn.vuejs.org/...

这样不是直接拿就可以拿到么?就这样简单的用就可以啊。

在setup中要return出去,

image.png
image.png

结果:
image.png

你myRef有没有绑dom啊

ref 只能获取到子组件暴露出来的字段吧,和 dom 无关呀
在子组件child

defineExpose({
    todo
})

父组件

childRef.value.todo
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题