请问 vue3 这样的写法，怎样获取元素 dom？

Question

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

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

Answer 1

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

Answer 2

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

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

你如果不行，请把代码贴出来（在线平台上，比如 codepen、codesandebox等）

Answer 3

问题中的 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/...

Answer 4

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

在setup中要return出去，

结果：

Answer 5

你myRef有没有绑dom啊

Answer 6

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

defineExpose({
    todo
})

父组件

childRef.value.todo