Vue3模板引用的操作方式示例详解

更新时间：2023年06月16日 09:46:35 作者：mdnice

这篇文章主要为大家介绍了Vue3模板引用的操作方式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

访问模板引用

在某些情况下我们仍需要获取到原生的dom节点，可以使用ref属性，具体操作如下:

<input type="text" ref="inputRef">
<script setup>
import {onMounted, ref} from 'vue'
// 必须与元素中的ref值同名，并且初始值为null
const inputRef = ref(null)
// 在onMounted中以保证dom渲染完成，以防拿不到dom
onMounted(() => { 
    console.log(inputRef.value)
})
</script>

v-for 中的模板引用

得到的是一个装着dom的数组

<ul>
  <li v-for="item in datalist" :key="item" ref="itemRefs">{{ item }}</li>
</ul>

const datalist = reactive([1,2,3,4,5,6])
const itemRefs = ref(null)
onMounted(() => { 
    console.log(itemRefs.value)  // 输出一个数组
})

函数模板引用

ref 还可以绑定为一个函数，会在每次组件更新时都被调用。该函数会收到元素引用作为其第一个参数：

<!-- 这里获取p标签的dom -->
<p :ref="(el) => {getRef(el)}">name: {{ name }}</p>
<input type="text" v-model.lazy="name">

const getRef = (el) => { 
    console.log(el)
}

以上代码中每次更新name值就会调用一次ref绑定的回调函数

改变了3次

输出如下:

组件上的 ref

ref用在了子组件上会获取到子组件的实例。特别注意的是如果子组件使用的不是组合式API而是使用的Vu2的选项式API，那么获取到的子组件实例和该组件的this一致所以父组件可以访问到子组件的所有属性，如果子组件使用了<script setup>则该组件是私有的，父组件访问不到里面的属性，关于组件间通讯的问题以后会详细讲解。

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'
const child = ref(null)
onMounted(() => {
  // child.value 是 <Child /> 组件的实例
})
</script>
<template>
  <Child ref="child" />
</template>

以上就是Vue3模板引用的详细内容，更多关于Vue3模板引用的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue兼容ie9的问题全面解决方案
这篇文章主要介绍了Vue兼容ie9的问题全面解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
Vue使用keep-alive实现页面前进刷新、后退缓存全过程
本文介绍了如何在Vue单页应用中使用keep-alive实现页面前进刷新、后退缓存,解决了从搜索页跳转到列表页需要重新加载数据以及从详情页返回列表页希望保留滚动位置和筛选状态的问题,通过合理使用keep-alive组件结合路由元信息管理,可以实现智能缓存策略
2025-10-10
详解Vue-cli webpack移动端自动化构建rem问题
这篇文章主要介绍了详解Vue-cli webpack移动端自动化构建rem问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
vue3中如何实现定义全局变量
这篇文章主要介绍了vue3中如何实现定义全局变量，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
如何解决ElementUI导航栏重复点菜单报错问题
这篇文章主要介绍了如何解决ElementUI导航栏重复点菜单报错问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
Vue-Cli配置代理转发解决跨域问题的方法
本文主要介绍了Vue-Cli配置代理转发解决跨域问题的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
vue中使用/deep/失效的解决方法
这篇文章主要介绍了vue中使用/deep/失效的解决办法,使用了css预处理器，则可以使用/deep/，如果/deep/ 无效，则使用 ::v-deep，本文给大家讲解的非常详细需要的朋友可以参考下
2022-11-11
vue组件中实现嵌套子组件案例
这篇文章主要介绍了vue组件中实现嵌套子组件案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue使用swiper插件实现垂直轮播图
这篇文章主要介绍了vue使用swiper插件实现垂直轮播图，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
带你一步步从零搭建一个Vue项目
Vue.js是现在比较优秀的Web前端框架,非常推荐大家入门学习,这篇文章主要给大家介绍了关于如何一步步从零搭建一个Vue项目的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
2022-05-05