Повторное использование методов, предназначенных для функций
Сценарий
Представьте, что у вас есть несколько кликабельных полей со значками. Вы хотите сфокусировать поле ввода независимо от того, где вы щелкаете в родительском элементе.
Проблема
В зависимости от того, где вы щелкнете, $event.target изменится. Это означает, что вам нужно либо использовать умный способ найти намеченную цель, либо применить элегантный подход.
Решение Vue2
Самый элегантный подход — определить ссылку и получить доступ к ссылке, соответствующей выбранному элементу.
В Vue2 это будет выглядеть следующим образом.
Проблема Vue3
Если вы используете API композиции Vue3, вы заметите, что достижение такого поведения не очень очевидно.
Методы больше не имеют доступа к объекту, который содержит все ссылки, определенные в компоненте. Таким образом, вы можете в конечном итоге согласиться на менее элегантное решение. Однако это не обязательно.
Решение Vue3
Решение простое. Используйте объект, в котором значения свойств являются ссылками. Затем вы можете обновить свой шаблон до чего-то вроде следующего.
Бонус: лучший способ определить ссылки
Вместо того, чтобы писать ref снова и снова. Вы можете написать метод для определения ссылок из массива. Так как я использую Lodash, я сделал что-то вроде этого.
Теперь я могу переписать определение inputs следующим образом:
Заключение
Вместо того, чтобы использовать цель события для фокусировки элемента, вы можете использовать динамические ссылки. Это позволяет повторно использовать обработчики событий.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.
