Vue 3 获取 DOM

冷不防 2023-09-26 20:18 128阅读 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