vue3如何获取dom元素

最新推荐文章于 2024-07-20 00:12:32 发布

동경

最新推荐文章于 2024-07-20 00:12:32 发布

阅读量687

点赞数

分类专栏： Vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_43814775/article/details/129335301

版权

Vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

在Vue3中，可以通过`ref`和`onMounted`生命周期钩子获取DOM元素。例如，创建一个名为`root`的ref，在元素挂载后，`root.value`或`proxy.root`可访问到DOM。此外，可以使用`$el.clientWidth`获取元素的宽度。

摘要由CSDN通过智能技术生成

  <template>
    <div ref="root" class="root">VUE3 如何获取dom元素</div>
  </template>

  <script>
    import { ref, onMounted, getCurrentInstance } from 'vue';
    export default {
      setup() {
        const { proxy } = getCurrentInstance();
        const root = ref(null);

        onMounted(() => {
          // DOM元素将在初始渲染后分配给ref
          //第一种
          console.log(root.value); 
          //第二种
          console.log(proxy.root); 
          //第三种
          console.log(document.querySelector('.root'))   
        });

        return {
          root
        };
      }
    };
  </script>

相关链接：vue3 ref

扩展:

问：vue3中如何获取dom 宽度?

答：

在Vue 3中，可以使用ref来引用DOM元素，然后使用==$el==属性来访问DOM元素的属性，包括宽度。

<template>
  <div ref="myDiv">Hello World</div>
</template>

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

export default {
  setup() {
    const myDiv = ref(null);

    onMounted(() => {
      const width = myDiv.value.$el.clientWidth;
      console.log('Width:', width);
    });

    return {
      myDiv,
    };
  },
};
</script>