ссылка на шаблон
refСсылка для регистрации элемента или подкомпонента
В составном API ссылка будет храниться refтак
<template>
<p ref="myDom">hello</p>
</template>
<script lang="ts" setup>
import {
ref, onMounted } from 'vue';
const myDom = ref();
onMounted(() => {
console.log('myDom', myDom.value);
});
</script>
При использовании в обычном элементе DOM ссылкой будет сам элемент; при использовании в подкомпоненте ссылкой будет экземпляр подкомпонента.
Вы должны дождаться монтирования компонента, прежде чем вы сможете получить доступ к ссылке, зарегистрированной ref
Если вам нужно прослушивать изменения в ссылке, обязательно учитывайте ее undefinedзначение :
// 使用 watchEffect 监听值的变化
watchEffect(() => {
if (input.value) {
input.value.focus();
} else {
// 此时还未挂载, 或此元素已经被卸载 (例如通过 v-if 控制)
}
});
<template>
<input
type="text"
ref="input"
v-if="isShowed"
/>
<button @click="showInput">showInput</button>
</template>
<script setup lang="ts">
import {
ref, nextTick } from 'vue';
const input = ref();
const isShowed = ref(false);
const showInput = () => {
isShowed.value = true;
nextTick(() => {
// 使用 nextTick
input.value.focus(); // 确保 input 已被挂载再执行 focus()
});
};
</script>
Ссылки на шаблоны в v-for
При использовании ссылки на шаблон v-forв , соответствующее значение ref представляет собой массив, который будет содержать все элементы, соответствующие всему списку после того, как элемент будет повешен.
<template>
<ul>
<li
v-for="item in list"
ref="itemRefs"
>
{
{ item }}
</li>
</ul>
</template>
<script setup lang="ts">
import {
ref, onMounted } from 'vue';
const list = ref([1, 2, 3]);
const itemRefs = ref([]);
onMounted(() => console.log(itemRefs.value));
</script>
Примечание. Порядок массива ссылок не обязательно соответствует порядку исходного массива.
ссылка на шаблон функции
refатрибут может связывать функцию, которая будет вызываться каждый раз при обновлении компонента- Функция получает ссылку на элемент в качестве первого аргумента.
<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">
- Примечание. Вам необходимо использовать динамическую
:refпривязку - Когда связанный элемент выгружается, функция также будет вызвана один раз, и первый параметр функции
elбудетnull
ссылка на компонент
Ссылки на шаблоны также можно использовать для подкомпонентов, где ссылка является экземпляром компонента.
Примечание. <script setup>Используемые по умолчанию являются закрытыми, и родительские компоненты не могут получить доступ <script setup>к чему-либо в подкомпонентах, использующих , если только подкомпонент не настроен на отображение defineExposeмакроса :
<template>
{
{ name }}
</template>
<script setup lang="ts">
import {
ref } from 'vue';
const name = ref('superman');
defineExpose({
name }); // 暴露数据
</script>
<template>
<HelloWorld ref="helloWorld" />
</template>
<script lang="ts" setup>
import HelloWorld from '@/components/HelloWorld.vue';
import {
ref, onMounted } from 'vue';
const helloWorld = ref();
onMounted(() => {
console.log('helloWorld 暴露出来的 name:', helloWorld.value.name);
});
</script>