Vue3中ref的用法举例总结(避免混淆)
作者：科科写代码
这篇文章主要给大家介绍了关于Vue3中ref的用法举例总结的相关资料,ref()接受一个内部值,返回一个响应式的可更改的ref对象,此对象只有一个指向其内部值的属性.value,需要的朋友可以参考下
前言
在Vue 3中，ref除了用于处理响应式数据外，在 Vue 3 中 ref 还可以用于访问组件中的 DOM 元素、组件实例以及存储任何需要在组件中进行状态管理的值。下面分别介绍这些用法：
1. 访问 DOM 元素
通过 ref 可以访问到在组件中定义的 DOM 元素，例如：input、div、img 等。可以使用 $refs 属性访问到这些元素。
<template>
<div>
<input ref="myInput" type="text">
<button @click="focusInput">Focus Input</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const myInput = ref(null)
function focusInput() {
myInput.value.focus()
}
return {
myInput,
focusInput
}
}
}
</script>2. 访问组件实例
可以使用 ref 访问到组件的实例，以便在父组件中直接调用子组件中暴露的方法或访问子组件中暴露的数据。
<template>
<div>
<Child ref="childComponent" />
<button @click="callChildMethod">Call Child Method</button>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
setup() {
const childComponent = ref(null)
function callChildMethod() {
childComponent.value.myMethod()
}
return {
childComponent,
callChildMethod
}
}
}
</script>3. 存储任何需要在组件中进行状态管理的值
除了用于处理响应式数据，ref 还可以用于存储任何需要在组件中进行状态管理的值，例如：定时器 ID、请求状态等等。
<template>
<div>
<p v-if="isLoading">Loading...</p>
<button @click="fetchData">Fetch Data</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const isLoading = ref(false)
const timerId = ref(null)
function fetchData() {
isLoading.value = true
timerId.value = setTimeout(() => {
isLoading.value = false
clearTimeout(timerId.value)
}, 3000)
}
return {
isLoading,
fetchData
}
}
}
</script>这些都是 ref 函数在 Vue 3 中的一些用法，除了处理响应式数据之外，它还可以访问 DOM 元素、组件实例以及存储任何需要在组件中进行状态管理的值，使得 Vue 3 变得更加灵活和方便。
补充：获取 v-for 遍历的 DOM 或者 组件
<template>
<ul>
<li
v-for="item in cityList"
:key="item.id"
:ref="getDom">
{{item.city}}
</li>
</ul>
</template>
<script>
import { onMounted, reactive} from 'vue';
export default {
setup(){
const cityList = reactive([
{ city:'武汉', id: '027'},
{ city:'南京', id: '025'},
{ city:'重庆', id: '023'},
]);
// 1.定义一个空数组，接收所有的dom
const lis = [];
// 2. 定义一个函数，往空数组push dom
const getDom = (el) => {
lis.push(el);
}
onMounted(() => {
console.log(lis,lis[0])
})
return {
cityList,
getDom,
}
}
}
</script>
总结： 先定义一个空数组，再定义一个函数获取元素，并把该函数绑定到 ref 上（必须动态绑定），最后在函数中可以通过参数得到单个元素，这个元素一般可以放到数组中。
总结
到此这篇关于Vue3中ref的用法举例总结的文章就介绍到这了,更多相关Vue3中ref用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！