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

Question

Я действительно запутался с атрибутом "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, равного входному?

Answer 1

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

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

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

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

Answer 2

• $refs используется для выбора / нацеливания элементов HTML
• $refs это как document.querySelector('.el') в ванильном JS или $('.el') в jQuery
• $refs можно получить доступ внутри или за пределами вашего экземпляра VueJS.
• $refs НЕ РЕАКТИВНЫ в отличие от свойств данных.

Таким образом, рекомендуется использовать $refs когда вы хотите слушать / манипулировать / изменять значение элемента, который не связан / не контролируется со всеми свойствами экземпляра Vue, чтобы избежать конфликтов.

Answer 3

Я нахожу один вариант использования refАтрибут особенно полезен при тестировании компонентов Vue. Добавлениеref атрибут вашего html-элемента позволяет легко получить его при тестировании (например, const fooRef = wrapper.find({ ref: 'foo' })). Это особенно удобно, когда вы не хотите добавлять атрибуты id или class, поскольку они обычно также используются для целей стилизации, например, добавление классов только для идентификации элемента может привести к неожиданным стилям, если эти имена уже (или позже) являются используется в глобальных таблицах стилей.

Answer 4

заполняются только после того, как компонент был отрисован. Он предназначен только как аварийный выход для прямых манипуляций с детьми - вам следует избегать доступа к из шаблонов или вычисленных свойств.

ссылка - https://v3.vuejs.org/guide/component-template-refs.html