$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, и они могут вызвать проблемы, если вы не понимаете их правильное использование. Самый безопасный способ их использования — вне хуков вашего жизненного цикла и только внутри методов. Кроме того, избегайте прямого использования в шаблонах компонентов или вычисляемых свойствах.

Если вы хотите повозиться с исходным кодом, вы найдете его здесь:



Также Вот подробное руководство о том, как и где безопасно получить доступ к рефам, и, конечно же, официальная документация.

Привет ☕️