vue3中获取 DOM方法（vue获取div的内容）

ztj100 2024-11-02 14:31 27 浏览 0 评论

在 Vue 3 中，获取 DOM 的方式与 Vue 2 类似，但有一些变化。

<template>
    <el-form ref="formRef"></el-form>
    <child-component />
</template>
<script setup lang="ts">
import ChildComponent from './child.vue'
import { getCurrentInstance } from 'vue'
import { ElForm } from 'element-plus'

// 方法一，这个变量名和 DOM 上的 ref 属性必须同名，会自动形成绑定
const formRef = ref(null)
console.log(formRef.value) // 这就获取到 DOM 了

// 方法二
const { proxy } = getCurrentInstance()
proxy.$refs.formRef.validate((valid) => { ... })

// 方法三，比如在 ts 里，可以直接获取到组件类型
// 可以这样获取子组件
const formRef = ref<InstanceType<typeof ChildComponent>>()
// 也可以这样 获取 element ui 的组件类型
const formRef = ref<InstanceType<typeof ElForm>>()
formRef.value?.validate((valid) => { ... })
</script>

原生js获取 DOM 节点：

document.querySelector(选择器)
document.getElementById(id选择器)
document.getElementsByClassName(class选择器)
....

<template>
  <div>Hello World!</div>
</template>

<script>
export default {
  mounted() {
    const div = document.querySelector('div')
    console.log(div)
  }
}
</script>

注意，使用原生JavaScript方法可能会导致代码变得更加复杂，并且可能会破坏Vue的响应式机制。因此，在大多数情况下，最好使用Vue提供的方法来获取DOM元素。

vue获取dom节点

上一篇：互联网企业:Java岗面试题精华版集合，你能面试上嘛?
下一篇：一文搞懂Vue3中如何使用ref获取元素节点?

vue3中获取 DOM方法（vue获取div的内容）

原生js获取 DOM 节点：

相关推荐

取消回复欢迎你发表评论:

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

【VueTorrent】一款吊炸天的qBittorrent主题，人人都可用

面试官:使用int类型做加减操作，是线程安全吗

C++编程知识:ToString()字符串转换你用正确了吗?

【Spring Boot】WebSocket 的 6 种集成方式

PyTorch 深度学习实战(26):多目标强化学习Multi-Objective RL

pytorch中的 scatter_()函数使用和详解

与 Java 17 相比，Java 21 究竟有多快?

基于TensorRT_LLM的大模型推理加速与OpenAI兼容服务优化

vue3中获取 DOM方法（vue获取div的内容）

原生js获取 DOM 节点：

相关推荐

取消回复欢迎 你 发表评论:

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

【VueTorrent】一款吊炸天的qBittorrent主题，人人都可用

面试官:使用int类型做加减操作，是线程安全吗

C++编程知识:ToString()字符串转换你用正确了吗?

【Spring Boot】WebSocket 的 6 种集成方式

PyTorch 深度学习实战(26):多目标强化学习Multi-Objective RL

pytorch中的 scatter_()函数使用和详解

与 Java 17 相比，Java 21 究竟有多快?

基于TensorRT_LLM的大模型推理加速与OpenAI兼容服务优化

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起