vue3如何使用ref获取元素

目录
  • vue3使用ref获取元素
  • vue3中ref的理解
    • 1.什么是ref?
    • 2.ref本质
    • 3.ref注意点
    • 4.ref获取元素

vue3使用ref获取元素

在vue2.x中，可以通过给元素添加ref='xxx'属性，然后在代码中通过this.$refs.xxx获取到对应的元素

然而在vue3中时没有$refs这个东西的，因此vue3中通过ref属性获取元素就不能按照vue2的方式来获取

vue3需要借助生命周期方法，原因很简单，在setup执行时，template中的元素还没挂载到页面上，所以必须在mounted之后才能获取到元素。

<template>
  <div ref='box'>I am DIV</div>
</template>
<script>
import {ref,onMounted}
export default{
  setup(){
    let box = ref(null);
    onMounted(()=>{
      console.log(box.value)
    });
    return {box}
  }
}
</script>

vue3中ref的理解

1.什么是ref?

ref和reactive一样,也是用来实现响应式数据的方法

由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦

所以Vue3提供了ref方法实现简单值得监听

2.ref本质

ref底层其实还是reactive,所以当运行时系统会自动根据传入的ref转换成reactive.

3.ref注意点

在vue中使用ref的值不用通过value获取

在js中使用ref的值必须通过value获取

4.ref获取元素

在vue2中我们可以通过给元素添加ref=‘xxx’,然后在代码中通过refs.xxx的方式来获取元素,在vue3中也可以通过ref来获取元素.

但不是像以下这种熟悉的方式,因为在vue3中没有$和refs这些东西.

错误示范

正确写法

<template>
  <div>
    <div ref="box">我是div</div>
  </div>
</template>
<script>
import { ref,onMounted } from "vue";
export default {
  setup() {
    let box = ref(null); //本质是reactive({value:null})
    // 需要在生命周期获取
    onMounted(()=>{
      // 当界面挂载出来后就会自动执行
      console.log(box.value);
    })
    //接受的是null,原因是setup执行时机比mounted早,dom还没形成
    console.log(box.value);
    return { box };
  },
};
</script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue3中的Refs和Ref详情

    小编同样和大家分享关于Vue3中的数据相应的问题,下面我们来例举一个这样的例子 Vue.createApp({ template: `<div>{{ nameObj.name }}</div>`, setup() { const { reactive } = Vue const nameObj = reactive({name:'lilei',age:18}) setTimeout(() => { nameObj.name = 'hanmeimei' },2000) retu

  • vue基本使用--refs获取组件或元素的实例

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods 添加ref属性 <div id="app"> <h1 ref="h1Ele">这是H1</h1> <hello ref="ho">&l

  • Vue3如何理解ref toRef和toRefs的区别

    目录 一.基础 1.ref 2.toRef 3.toRefs 4.最佳的使用方式 二.深入 1.为什么需要ref 2.ref为什么需要.value 3.为什么需要toRef和toRefs Vue3中新增了几种创建响应式数据的方法,其各自的作用当然也不尽相同,每一种方法都有其自己的应用场景,今天我们来聊聊什么是ref toRef和toRefs?三者在使用方式上有什么不同?最佳的使用方式是什么? 一.基础 1.ref (1) 生成值类型的响应式数据, 通过 .value修改值 <template>

  • 一文详解Vue3中使用ref获取元素节点

    目录 静态绑定 onMounted nextTick watchEffect watch v-for中使用 动态绑定 ref设置函数 通过getCurrentInstance方法 获取vue实例 前言: 本文介绍在vue3的setup中使用composition API获取元素节点的几种方法: 静态绑定 仅仅需要申明一个ref的引用,用来保存元素,在template中,不必bind引用(:ref="domRef"),只需要声明一个同名的ref属性(ref="domRef&qu

  • vue3如何使用ref获取元素

    vue3如何使用ref获取元素

    目录 vue3使用ref获取元素 vue3中ref的理解 1.什么是ref? 2.ref本质 3.ref注意点 4.ref获取元素 vue3使用ref获取元素 在vue2.x中,可以通过给元素添加ref='xxx'属性,然后在代码中通过this.$refs.xxx获取到对应的元素 然而在vue3中时没有$refs这个东西的,因此vue3中通过ref属性获取元素就不能按照vue2的方式来获取 vue3需要借助生命周期方法,原因很简单,在setup执行时,template中的元素还没挂载到页面上,所

  • vue3中通过ref获取元素节点的实现

    vue3中通过ref获取元素节点的实现

    目录 通过ref获取元素节点 获取ref元素的几种方式小结 1. 原生js获取dom元素 2. ref获取单个dom元素 3. ref获取v-for循环中的dom元素 4. 在swiper中获取swiper的dom元素 通过ref获取元素节点 ref 在vue2中可以说简化js原生的document.getElementById("#id")操作 .当然在vue3中也一样 首先,给你想获取到的元素一个ref 属性 然后,再将这个ref对象创建出来,就可以访问到他的值 但是.这样在set

  • 一篇文章搞懂Vue3中如何使用ref获取元素节点

    目录 前言 1.回顾 Vue2 中的 ref 2.Vue3 中 ref 访问元素 3.v-for 中使用 ref 4.ref 绑定函数 5.组件上使用 ref 总结 前言 虽然在 Vue 中不提倡我们直接操作 DOM,毕竟 Vue 的理念是以数据驱动视图.但是在实际情况中,我们有很多需求都是需要直接操作 DOM 节点的,这个时候 Vue 提供了一种方式让我们可以获取 DOM 节点:ref 属性.ref 属性是 Vue2 和 Vue3 中都有的,但是使用方式却不大一样,这也导致了很多从 Vue2

  • vue3 获取元素高度不准的问题

    目录 vue3 获取元素高度不准 页面获取元素高度和$el问题 vue3 获取元素高度不准 html: <transition name="slide-width">     <a-col class="fixed-small" v-show="isShow" :style="{height: `${ztreeHeight}px`}">          <div style="heig

  • vue 3.0 使用ref获取dom元素的示例

    vue 3.0 使用ref获取dom元素的示例

    前言 附上vue3.0文档:Vue3中文文档 - vuejs Vue 2.x获取DOM <div ref="myRef"></div> this.$refs.myRef Vue 3.0获取单个DOM <template> <div ref="myRef">获取单个DOM元素</div> </template> <script> import { ref, onMounted } fr

  • vue3使用自定义hooks获取dom元素的问题说明

    目录 使用自定义hooks获取dom元素问题 分享下楼主自己的观点 vue获取/操作组件的dom元素 下面是我的代码内容(非全部内容) 最后总结 使用自定义hooks获取dom元素问题 在自定义hooks的onMounted事件里面 获取ref元素,组件调用hooks的时候必须要传递响应式对象. 分享下楼主自己的观点 代码如下 <script> // demo.vue import { defineComponent, ref } from 'vue' import useBars from

  • Vue3中使用setup通过ref获取子组件的属性

    Vue3中使用setup通过ref获取子组件的属性

    目录 setup通过ref获取子组件的属性 调用子组件的属性和方法 setup通过ref获取子组件的属性 主要依赖defineExpose 子组件通过 defineExpose将数据抛出 <template>   <div class="test-com">testCom</div> </template> <script setup lang="ts"> import { ref } from 'vue'

  • Vue3.0中Ref与Reactive的区别示例详析

    目录 Ref与Reactive Ref Reactive Ref与Reactive的区别 shallowRef 与shallowReactive toRaw ---只修改数据不渲染页面 markRaw --- 不追踪数据 toRef --- 跟数据源关联 不修改UI toRefs ---设置多个toRef属性值 customRef ---自定义一个ref ref 捆绑页面的标签 总结 Ref与Reactive Ref Ref 用来创建基础类型的响应式数据,模板默认调用value显示数据.方法中修

随机推荐