В этом уроке мы с вами разберем refs в Vue. Мы с вами уже использовали props для передачи данных между компонентами. Но иногда этого не достаточно. Иногда мы хотим получить доступ напрямую к DOM элементу, чтобы получить какие-то данные или обновить что-то. Для этого в Vue есть специальный атрибут ref.
У меня создан пустой проект webpack-simple с помощью vue-cli. Давайте добавим input с атрибутом ref.
App.vue
<input type='text' ref='name' />
Когда мы используем атрибут ref на элементе, то у нас автоматически создается ссылка на него внутри this. Здесь мы создали ссылку this.name на наш DOM элемент input.
Давайте попробуем что-то более реалистичное. Например, нам нужно после клика на кнопку навести фокус на input. Давайте добавим кнопку и метод для этого.
App.vue
<input type='text' ref='name' />
<button @click='focus'>Focus input</button>
App.vue
methods: {
focus () {
console.log('here will be focus')
}
}
Если мы посмотрим в браузер, то по клику на кнопку у нас выводится сообщение из метода focus. Теперь для того, чтобы получить доступ к элементу input мы можем написать this.$refs.name.
App.vue
focus () {
console.log('here will be focus', this.$refs.name)
}
Если мы посмотрим в браузер, то мы получили нативный DOM элемент. Давайте теперь применим к нему метод focus.
App.vue
focus () {
this.$refs.name.focus()
}
Теперь, когда мы кликаем на кнопку, то на наш input ставится фокус.
Я рекомендую использовать refs как можно реже. Обычно вам должно хватать props и евентов, чтобы построить приложение. Но если вы видите, что вам необходимо работать напрямую с нативным DOM элементом, то всегда используйте refs для этого.
Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.