# Refs в Vue

03:00
poster
В этом уроке мы с вами разберем, как получить доступ к DOM элементу с помощью refs в Vue.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

В этом уроке мы с вами разберем 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 для этого.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Влад Портной
10 месяцев назад
«Краткость – сестра таланта». Это про тебя) спасибо что пилишь уроки в которых все четко и ясно. Все не запомнишь, по этому использую как шпаргалки время от времени. Еще раз спасибо!
monsterlessons
10 месяцев назад
На здоровье. Рад, что уроки полезны.
Moe Green
1год назад назад
Случай, когда refs может быть необходим - это реализация кнопки upload. Например, в достаточно популярном Vuetify.js до сих пор не реализован компонент upload и приходится извращаться через refs ))
monsterlessons
1год назад назад
Как вариант. В этом и проблема Vue, он не настолько популярный, чтобы даже популярные библиотеки были допилены до хорошего уровня. И приходится много писать рукамию