Vue 3 获取 DOM

冷不防 2023-09-26 20:18 57阅读 0赞

## Vue 3 获取 DOM ##

#### 文章目录 ####

*  Vue 3 获取 DOM
 *   *  1、方式一：自动绑定
     *   *  代码示例
         *  打印结果
     *  2、方式二：proxy
     *   *  代码示例
         *  打印结果

### 1、方式一：自动绑定 ###

**要求**： 要求组件必须有 ref 属性，且变量名必须与 ref 属性值相同！

#### 代码示例 ####

<template>
      <div ref="name">
        <h1>訾博</h1>
      </div>
    </template>
    
    <script setup lang="ts">
    import {
        onMounted, ref} from "vue";
    
    // 方式一：自动绑定：要求组件必须有 ref 属性，且变量名必须与 ref 属性值相同
    const name = ref<any>();
    // 这么写打印的是 undefined ，因为 ref 会在组件渲染完成后才会获取到真实的 DOM 元素
    console.log("===setup===")
    console.log(name.value);
    
    onMounted(() => {
        
      console.log("===onMounted===")
      console.log(name.value);
    });
    </script>

#### 打印结果 ####

![在这里插入图片描述][ed7be342e9d0460fa45a9aa2785ebc93.png]

### 2、方式二：proxy ###

#### 代码示例 ####

<template>
      <div ref="name">
        <h1>訾博</h1>
      </div>
    </template>
    
    <script setup lang="ts">
    import {
         getCurrentInstance, onMounted } from "vue";
    // 获取当前实例
    const instance = getCurrentInstance();
    
    onMounted(() => {
        
      if (instance) {
        
        const proxy = instance.proxy;
        if (proxy) {
        
          console.log(proxy.$refs.name)
        }
      }
    });
    </script>

#### 打印结果 ####

![70df22e7a69f4fb497f0b2202b7892fc.png][]

[ed7be342e9d0460fa45a9aa2785ebc93.png]: https://img-blog.csdnimg.cn/ed7be342e9d0460fa45a9aa2785ebc93.png
[70df22e7a69f4fb497f0b2202b7892fc.png]: https://img-blog.csdnimg.cn/70df22e7a69f4fb497f0b2202b7892fc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，57人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue选项/DOM

Vue选项/DOM * el * template * render * renderError el * 类型：`string | El...

以你之姓@/ 2024年04月17日 05:54/ 0 赞/ 8 阅读

相关 Vue 3 获取 DOM

Vue 3 获取 DOM 文章目录 Vue 3 获取 DOM 1、方式一：自动绑定代码示例打印结果

冷不防/ 2023年09月26日 20:18/ 0 赞/ 58 阅读

相关 vue虚拟DOM

怎么使用虚拟DOM Vue在2.0版本引入了vdom，其vdom是基于snabbdom库所做的修改。snabbdom是一个开源的vdom库。snabbdom的主要作用就是将

旧城等待，/ 2023年08月17日 16:22/ 0 赞/ 9 阅读

相关 Vue.js中$refs{}获取DOM元素

如果我们想获取DOM元素，一般使用js中的`document.querySelector`来获取这个dom节点，然后在获取元素的值，现在Vue提供给我们一种更便捷的方式来获取D

以你之姓@/ 2022年12月22日 10:00/ 0 赞/ 261 阅读

相关 Vue3 DOM Diff 核心算法解析

「观感度：????????????????????」「口味：辣炒花蛤」「烹饪时间：10min」 > 本文已收录在前端食堂同名仓库Github github.co

谁践踏了优雅/ 2022年12月15日 02:58/ 0 赞/ 134 阅读

相关【DOM 编程艺术】3.5 获取和设置属性

> getAttribute用于获取各个属性，setAttribute方法可以更改属性节点的值。 <table> <tbody> <tr> <td><b>1

心已赠人/ 2022年06月08日 08:39/ 0 赞/ 128 阅读

相关（七）在Vue中获取DOM对象

在Vue中我们也可以获取DOM对象利用特殊特性ref和实例属性vm.$refs实现在Vue中获取到特定的DOM对象 1）首先在子组件的<template>中某个元素节点上

川长思鸟来/ 2022年05月26日 12:41/ 0 赞/ 96 阅读

相关 vue中获取并操作dom元素

获取dom元素可以使用 elementList = document.querySelectorAll(selectors);//获取多个dom元素如ul中的li

墨蓝/ 2022年05月21日 03:45/ 0 赞/ 198 阅读

相关 vue中使用ref获取dom对象

（1）在标签上绑定一个ref属性，该属性可以获得该标签的dom对象 <div id="app"> <div ref="hi" @click="

冷不防/ 2022年04月16日 00:06/ 0 赞/ 360 阅读

相关 vue获取dom元素高度的方法

获取高度： <div ref="自定义名称" > </div> 要在钩子mounted里面dom结构生成后去获取dom的高度，宽度，修改样式

男娘i/ 2021年09月30日 11:02/ 0 赞/ 1903 阅读