$ref — аварийный люк Vue для прямого доступа к компонентам.
Читать эту статью в темном режиме. 🌙, легко копируйте и вставляйте образцы кода и находите больше подобных материалов на Devjavu.
В этой статье предполагается, что у вас есть базовые знания о реактивной системе Vue и Vue.
Чрезвычайные ситуации — это данность, и иногда мы получаем одну из них при создании интерфейсных приложений, к счастью, большинство этих интерфейсных фреймворков предоставляют нам несколько способов справиться с чрезвычайными ситуациями. В Vue одним из многих аварийных люков является атрибут $ref.
Как правило, в Vue часто используется атрибут ref для чистых HTML-элементов (например, элемент <input />), точно так же вы можете иметь ссылку на пользовательский компонент (<my-custom-componet />) и иметь доступ к его вычисленным значениям. методы, свойства данных и так далее. Это, однако, следует использовать только в экстренных ситуациях или в крайнем случае.
Доступ к данным — общий подход
Скажем, у нас есть два дочерних компонента (компонент A и компонент B) внутри родительского компонента, и нам по какой-то причине нужно отобразить некоторые данные из компонента A в B и наоборот. см. примерный набросок ниже:
Общим и рекомендуемым подходом будет отправка данных из A, добавление прослушивателя/обработчика в родительский компонент, а затем передача значения в компонент B через реквизиты. Это будет выглядеть примерно так:
В некоторых случаях нам может понадобиться взломать наш путь и исключить некоторые шаги из этого потока, чтобы немного сократить путь передачи данных. Скажем, ComponentA не нужно передавать значение своих данных родительскому компоненту, тогда мы можем удалить этапы отправки и прослушивания и получить прямой доступ к значениям в ComponentA из родительского компонента.
Использование $ref
Допустим, у нас есть два идентичных компонента — Компонент А и Компонент Б.
Компонент A имеет два метода; setThought, который устанавливает значение свойства данных thought на любое значение, переданное из редактируемого div, и другой метод — readMind, который пока ничего не делает.
Компонент B аналогичен с небольшим отличием в содержании:
Возможно, вы уже поняли, что мы хотим здесь сделать, а может и нет. Нам нужно, чтобы Компонент А мог читать мысли Компонента Б, без того, чтобы Компонент Б излучал свои мысли.
Для этого у обоих компонентов должно быть что-то общее — их родитель. Чтобы обмениваться данными между двумя компонентами с помощью $ref , они должны быть дочерними элементами одного и того же родительского компонента. Таким образом, в родительском компоненте мы импортируем компоненты A и B в родительский компонент и назначаем атрибуты ref им обоим.
С помощью этой структуры мы можем легко получить доступ к каждому компоненту по ссылке из его родителя следующим образом:
this.$parent.$refs.componentA OR this.$parent.$refs.componentB
Теперь мы можем обновить метод readMind для Component A, чтобы при нажатии кнопки Component A точно знал, о чем думает Component B:
Обратите внимание, что мы можем получить доступ к свойству данных thought в ComponentB, установив для него атрибут ref и обратившись к нему из его родителя.
Мы можем сделать аналогичное обновление метода readMind в Компоненте B, чтобы сделать то же самое — узнать, что думает Компонент A.
Как это выглядит?
Можем ли мы также установить значения компонентов?
Конечно, как и в фильме 2010 года — Начало, давайте заставим мысли Компонента Б совпадать с тем, о чем думает Компонент А. Мы можем установить значение свойств данных таким же образом:
Кроме того, вы можете вызвать метод setThought компонента B из компонента A:
Как это будет выглядеть?
О, рефери реактивные?
Нет, они не. То, что вы видите, является результатом вызова метода setThought каждый раз при вводе данных в Component A и, в свою очередь, установки значения this.$parent.$refs.componentB.thought в то же значение, что и свойство данных thought в ComponentA.
Рефы — одна из необычных частей Vue, и они могут вызвать проблемы, если вы не понимаете их правильное использование. Самый безопасный способ их использования — вне хуков вашего жизненного цикла и только внутри методов. Кроме того, избегайте прямого использования в шаблонах компонентов или вычисляемых свойствах.
Если вы хотите повозиться с исходным кодом, вы найдете его здесь:
Также Вот подробное руководство о том, как и где безопасно получить доступ к рефам, и, конечно же, официальная документация.
Привет ☕️
