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中如何引入外部的css文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
vue打包静态资源后显示空白及static文件路径报错的解决
这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
在for循环中生成的元素要加key属性不仅是在Vue框架中是要添加的，在React框架中也是要添加的。但\其实都不是必须的，因为在 Vue和React中不加key是不会报错的，只是会有警告。但是我们在深入了解加key的原因后会明白，若想确保没有隐患的话，元素还是必须要加key属性。2021-05-05
electron+vue实现div contenteditable截图功能
这篇文章主要介绍了electron+vue实现div contenteditable截图功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
端午将至，大家都开始吃粽子了么？本文将用vite2与vue3开发出一个招财猫小游戏，在图案不停滚动的同时选出可以转出不同的素材最终得到粽子奖励，康康你能用多少次才会转出自己喜爱口味的粽子吧2022-05-05
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
这篇文章主要介绍了Vue+elementUI的动态表单的校验(根据条件动态切换校验格式),本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
Vue解决element-ui消息提示$message重叠问题
这篇文章主要为大家介绍了Vue解决element-ui消息提示$message重叠问题,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要给大家介绍了利用webstrom调试Vue.js单页面程序的方法教程，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-06-06
这篇文章主要介绍了vue-router 路由基础的详解的相关资料,希望通过本文能帮助到大家，让大家理解掌握这部分内容，需要的朋友可以参考下2017-10-10
这篇文章主要介绍了Vue的组件,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2021-10-10
最新评论