首页 前端知识 vue3的refs用法

vue3的refs用法

2024-02-08 15:02:20 前端知识 前端哥 366 935 我要收藏

前言:

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。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1505.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!