Refs
ref — это специальный атрибут, аналогичный key атрибуту, позволяет нам получить прямую ссылку на конкретный элемент DOM или экземпляр дочернего компонента после его монтирования. Это может быть полезно, если вы хотите, например, программно сосредоточить ввод на монтировании компонента или инициализировать стороннюю библиотеку для элемента.
Внимание!
В этой главе мы рассмотрим тему refs с помощью composition API, и в конце статьи на options API. Не волнуйтесь, вы детально познакомитесь с темой composition API в следующих уроках
Доступ к ссылкам
Чтобы получить ссылку с помощью Composition API, нам нужно объявить ссылку с тем же именем
Если вы не используете script setup, обязательно верните ссылку из setup()
Обратите внимание
Вы можете получить доступ к ссылке только после того, как компонент смонтирован. Если вы попытаетесь получить доступ к выражению шаблона, оно будет при первом рендеринге. Это потому, что элемент не существует до первого рендеринга! input null
Если вы пытаетесь отслеживать изменения ссылки на шаблон, обязательно учтите случай, когда ссылка имеет null значение
Ссылки внутри v-for
Требуется версия 3.2.25 или выше
Когда ref используется внутри v-for, соответствующая ссылка должна содержать значение массива, которое будет заполнено элементами после монтирования
Важно
Следует отметить, что массив ref не гарантирует тот же порядок, что и исходный массив
Ссылки на функции
Вместо строкового ключа ref атрибут также можно привязать к функции, которая будет вызываться при каждом обновлении компонента и дает вам полную гибкость в выборе места хранения ссылки на элемент. Функция получает ссылку на элемент в качестве первого аргумента
Обратите внимание
Мы используем динамическую :ref привязку, поэтому мы можем передать ей функцию вместо строки имени ссылки. Когда элемент размонтирован, аргумент будет null. Конечно, вы можете использовать метод вместо встроенной функции
Ссылка на компонент
Этот раздел предполагает знание компонентов . Не стесняйтесь пропустить его и вернуться позже
ref также может использоваться в дочернем компоненте. В этом случае ссылкой будет ссылка на экземпляр компонента
Если дочерний компонент использует API-интерфейс Options или не использует script setup, указанный экземпляр будет идентичен экземпляру дочернего компонента this, что означает, что родительский компонент будет иметь полный доступ ко всем свойствам и методам дочернего компонента. Это упрощает создание тесно связанных деталей реализации между родительским и дочерним компонентами, поэтому ссылки на компоненты следует использовать только в случае крайней необходимости — в большинстве случаев вам следует сначала попытаться реализовать взаимодействия родительского/дочернего компонента с использованием стандартных свойств и интерфейсов генерации
Исключением здесь является то, что используемые компоненты по умолчанию script setup являются частными : родительский компонент, ссылающийся на дочерний компонент, не сможет получить доступ ни к чему, если дочерний компонент не решит предоставить общедоступный интерфейс с помощью макроса script setup defineExpose
Когда родительский элемент получает экземпляр этого компонента через ссылки на шаблон, полученный экземпляр будет иметь форму { a: number, b: number } (ссылки автоматически разворачиваются, как и в обычных экземплярах)
# Options API
Доступ к ссылкам
Полученная ссылка отображается на this.$refs
Обратите внимание
Вы можете получить доступ к ссылке только после того, как компонент смонтирован. Если вы попытаетесь получить доступ к выражению шаблона, оно будет при первом рендеринге. Это потому, что элемент не существует до первого рендеринга! $refs.input undefined
Ссылки внутри v-for
Требуется версия 3.2.25 или выше.
При ref использовании внутри v-for результирующее значение ref будет массивом, содержащим соответствующие элементы
Важно
Следует отметить, что массив ref не гарантирует тот же порядок, что и исходный массив
Ссылка на компонент
Этот раздел предполагает знание компонентов . Не стесняйтесь пропустить его и вернуться позже.
ref также может использоваться в дочернем компоненте. В этом случае ссылкой будет ссылка на экземпляр компонента
Указанный экземпляр будет идентичен экземпляру дочернего компонента this, что означает, что родительский компонент будет иметь полный доступ ко всем свойствам и методам дочернего компонента. Это упрощает создание тесно связанных деталей реализации между родительским и дочерним компонентами, поэтому ссылки на компоненты следует использовать только в случае крайней необходимости — в большинстве случаев вам следует сначала попытаться реализовать взаимодействия родительского/дочернего компонента с использованием стандартных свойств и интерфейсов генерации.
Эту expose опцию можно использовать для ограничения доступа к дочернему экземпляру
В приведенном выше примере родитель, ссылающийся на этот компонент через ссылку на шаблон, сможет получить доступ только publicData к файлам publicMethod