Vue学习记录11
模板引用
虽然Vue的声明性渲染模型抽象了大部分对DOM的直接操作，但在某些情况下，仍然需要直接访问底层DOM元素。要实现这一点，可以使用特殊的 ref attribute:
<input ref="input">ref是一个特殊的attribute,和 v-for中提到的key类似。它允许我们在一个特定的DOM元素或子组件实例被挂载后，获得对它的直接引用。
访问模板引用
要在组合式API中获取引用，我们可以使用辅助函数useTemplateRef():
<script setup>
import { useTemplateRef, onMounted } from 'vue'
// 第一个参数必须与模板中的 ref 值匹配
const input = useTemplateRef('my-input')
onMounted(() => {
input.value.focus()
})
</script>
<template>
<input ref="my-input" />
</template>在使用TypeScript时，Vue的IDE支持和vue-tsc将根据匹配的ref attribtue所用的元素或组件自动推断inputRef.value的类型。
注意：你只可以在组件挂载后才能访问模板引用。如果你想在模板中的表达式上访问input，在初次渲染时会是null。这是因为在初次渲染前这个元素还不存在呢！
如果你需要侦听一个模板引用ref的变化，确保考虑到其值为null的情况。
watchEffect(() => {
if (input.value) {
input.value.focus()
} else {
// 此时还未挂载，或此元素已经被卸载（例如通过 v-if 控制）
}
})v-for中的模板引用
需要 v3.2.25 及以上版本
当在v-for中使用模板引用时，对应的ref中包含的时一个数组，它将在元素被挂载后包含对应整个列表的所有元素：
<script setup>
import { ref, useTemplateRef, onMounted } from 'vue'
const list = ref([
/* ... */
])
const itemRefs = useTemplateRef('items')
onMounted(() => console.log(itemRefs.value))
</script>
<template>
<ul>
<li v-for="item in list" ref="items">
{{ item }}
</li>
</ul>
</template>
应该注意的是，ref数组并不保证与源数组相同的顺序。
函数模板引用
除了使用字符串值作名字，ref attribute还可以绑定为一个函数，会在每次组件更新时都被调用。该函数会收到元素引用作为其第一个参数：
<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">注意这里需要使用动态的:ref绑定才能够传入一个函数。当绑定的元素被卸载时，函数也会被调用一次，此时el参数会是null。当然也可以绑定一个组件方法而不是内联函数。
原文地址：https://blog.csdn.net/cwtlw/article/details/144030381
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！