# Refs в Vue

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 для этого.

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

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