美文网首页vue大前端
Vue3学习与实战 · Ref获取真实DOM

Vue3学习与实战 · Ref获取真实DOM

作者: 天問_专注于大前端技术 | 来源:发表于2022-10-24 17:27 被阅读0次

在使用 Vue 、React 等MVVM框架开发项目时,基本上很少需要直接手动去操作 DOM 了,但是也不可避免,例如获取元素的宽高、元素在屏幕的XY位置、DIV拖拽等等。随着 Vue 版本的升级,在 Vue3 中获取真实DOM的方法也有了变化。

Vue3 && DOM

一、前言

ref():用于注册元素或子组件的引用。接受一个内部值,返回一个响应式的、可更改的 ref 对象,此对象只有一个指向其内部值的属性 .value。

二、ref获取真实DOM

  • 在选项式 API 中
<template>
  <!-- 普通元素 -->
  <div ref='eleBox' class='box'></div>
  <!-- 子组件 -->
  <ChildComponent ref='childCom' />
</template>
<script>
  export default {
    components: {
      ChildComponent,
    },
    mounted() {
      let eleBox = this.$refs.eleBox
      // eleBox 就是获取的真实DOM对象,可以进行DOM相关的操作
      eleBox.style.backgroundColor = '#f0f'
      
      // 获取子组件实例
      console.log(this.$refs.childCom)
    }
  }
</script>
  • 在组合式 API 中
<!-- 普通元素 -->
<div ref='eleBox' class='box'></div>
<!-- 子组件 -->
<ChildComponent :ref="(el) => childCom = el" />

<script setup>
  import { ref } from 'vue'
  
  let eleBox = ref()
  // eleBox.value 就是获取的真实DOM对象
  eleBox.value.style.width = '200px'
  
  let childCom = ref()
  // childCom.value 就是获取的子组件实例对象
</script>

欢迎访问:天问博客

相关文章

  • Vue3学习与实战 · Ref获取真实DOM

    在使用 Vue 、React 等MVVM框架开发项目时,基本上很少需要直接手动去操作 DOM 了,但是也不可避免,...

  • Vue 组件

    全局组件引入 局部组件引入 ref获取dom节点、获取组件引用 ref在html元素获取的是dom节点ref在组件...

  • 多功能ref及原理浅析

    一 前言 对于ref的理解,我们一部人还停留在用ref获取真实dom元素和获取组件层面上,但实际 ref 除了这两...

  • react ref获取真实dom

    之前一直用ref获取,没觉得有什么问题,但是获取封装的组件获取到的却是React对象,而不是dom元素。 ref获...

  • 组件通讯的方法

    派发与广播 向下传递所有属性 provide inject ref ref 可以用在dom元素上 获取的是dom节...

  • Vue中ref属性获取DOM元素和组件引用

    ref获取DOM元素vue中获取DOM元素不建议用js直接操作DOM,使用ref可达到操作DOM的效果写法:thi...

  • React获取DOM

    React获取DOM的方法简述 createRef 当 ref 属性在组件时,获取组件实例;当ref属性在dom时...

  • vue

    1.标识dom元素 ref 语法ref='标识名称' 可以通过$refs来获取之前通过ref标识的dom成员 ...

  • vue-ref的使用

    通过ref获取DOM的内容 需要通过全局的$refs获取当前定义的ref

  • Vue中获取dom元素之ref

    ref Vue中可以通过ref属性绑定Dom元素,通过this.$refs获取页面中的Dom元素 例:

网友评论

    本文标题:Vue3学习与实战 · Ref获取真实DOM

    本文链接:https://www.haomeiwen.com/subject/fougzrtx.html