vue3中refs用法举例小结

 更新时间:2023年08月18日 09:55:03   作者:尔嵘  
这篇文章主要给大家介绍了关于vue3中refs用法举例的相关资料,Vue.js中的$refs是一个对象,它持有已注册过ref特性的所有组件和元素,需要的朋友可以参考下

前言:

Vue 3的Refs是一种新的API,用于访问DOM元素或组件实例。Refs提供了一个简单的方法来访问DOM元素或组件实例,以便在Vue组件中进行操作和处理。在Vue3中,refs用于获取组件或DOM元素的引用,类似于Vue2中的$refs。但与Vue2不同的是,在Vue3中,refs可以是一个字符串或一个函数。

当refs是一个字符串时,在渲染时会将其关联到相应的元素或组件上,然后可以使用.value来访问它们:

<template>
    <div>
        <input ref="inputRef" />
        <button @click="handleClick">Click me</button>
    </div>
</template>
<script>
import { ref } from'vue';
export default {
  setup() {
    const inputRef = ref(null);
    const handleClick = () => {
      inputRef.value.focus();
    };
    return {
      inputRef,
      handleClick,
    };
  },
};
</script>

当refs是一个函数时,在渲染时会将其传递给组件的setup()函数,并且每当组件重新渲染时都会调用该函数。

这使得我们可以动态地创建和更新引用:

<template>
    <div>
        <MyComponent :ref="refHandler" />
    </div>
</template>
<script>
import { ref, onMounted } from 'vue';
import MyComponent from './MyComponent.vue';
export default {
  components: {
    MyComponent,
  },
  setup() {
    const refHandler = (el) => {
      console.log(el); // 打印组件实例或DOM元素
    };
    onMounted(() => {
      console.log(refHandler.value); 
    });
    return {
      refHandler,
    };
  },
};
</script>

我们使用onMounted生命周期函数,在组件挂载时访问了myRef引用。由于myRef引用与我们的<div>元素相关联,myRef.value将是这个元素的实际DOM元素。我们可以使用这个元素来执行任何我们需要的操作

需要注意的是,当使用函数ref时,如果组件没有被渲染或者已经被销毁,那么被传递给ref的回调函数参数将为null。

总结

到此这篇关于vue3中refs用法举例的文章就介绍到这了,更多相关vue3 refs用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue全局自定义指令Modal拖拽的实践

    Vue全局自定义指令Modal拖拽的实践

    最近一直在做的项目是Vue2搭建的项目,本文主要介绍了Vue全局自定义指令Modal拖拽的实践,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue 验证两次输入的密码是否一致的方法示例

    vue 验证两次输入的密码是否一致的方法示例

    这篇文章主要介绍了vue 验证两次输入的密码是否一致的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • vue中watch和computed的区别与使用方法

    vue中watch和computed的区别与使用方法

    这篇文章主要给大家介绍了关于vue中watch和computed的区别与使用方法的相关资料,文中通过实例代码结束的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-08-08
  • vue插槽slot的理解和使用方法

    vue插槽slot的理解和使用方法

    这篇文章主要给大家介绍了关于vue中插槽slot的理解和使用方法,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • Vue中使用vux的配置详解

    Vue中使用vux的配置详解

    这篇文章主要为大家详细介绍了Vue中使用vux配置的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • vue中v-model如何绑定多循环表达式实战案例

    vue中v-model如何绑定多循环表达式实战案例

    v-model绑定的变量无论是对象还是数组都是绑定的value值,下面这篇文章主要给大家介绍了关于vue中v-model如何绑定多循环表达式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • Vue.js 实现tab切换并变色操作讲解

    Vue.js 实现tab切换并变色操作讲解

    这篇文章主要介绍了Vue.js 实现tab切换并变色操作讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • Vue3中的setup语法糖、computed函数、watch函数详解

    Vue3中的setup语法糖、computed函数、watch函数详解

    这篇文章主要介绍了Vue3中的setup语法糖、computed函数、watch函数,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • Vue.js 中的 v-model 指令及绑定表单元素的方法

    Vue.js 中的 v-model 指令及绑定表单元素的方法

    这篇文章主要介绍了Vue.js 中的 v-model 指令及绑定表单元素的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • vue中使用canvas绘图详解

    vue中使用canvas绘图详解

    这篇文章主要介绍了vue中使用canvas绘图方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-09-09

最新评论