Какова реальная цель атрибута ref?

Я действительно смущен атрибутом "ref" элемента ввода. Я никогда не слышал об этом, основываясь на своих знаниях, и не могу найти в нем каких-то значимых материалов. Код находится в официальных документах vue.js.

<currency-input v-model="price"></currency-input>

Это код о компоненте:

Vue.component('currency-input', {
  template: `
    <span>
      $
      <input
        ref="input"
        v-bind:value="value"
        v-on:input="updateValue($event.target.value)">
    </span>
  `,
  props: ['value'],

каков смысл значения атрибута ref, равного вводу?

Ответы

Ответ 1

Основная цель атрибута ref состоит в том, чтобы сделать элемент DOM доступным, будучи ключевым в родительском атрибуте $refs.

Например, ваш входной элемент там с ref="input" будет выставлять свой DOM node в его родительском (здесь внутри валютного ввода this), как this.$refs["input"] (или this.$refs.input).

Смотрите: https://vuejs.org/v2/api/#ref

Он имеет несколько вариантов использования, даже если бы было бы лучше, если бы можно было напрямую не манипулировать DOM. Например, законным вариантом использования здесь является сосредоточение внимания на этом вводе: для этого вы можете использовать this.$refs["input"].focus() в методе компонента...