ref'属性の本当の目的は？

質問

input要素の"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属性の値がinputと等しいのはどういう意味ですか？

どのように解決するのですか？

ref 属性の主な目的は、DOM 要素を選択可能にするために、親である $refs 属性のキーとなることです。

例えば、あなたの input 要素に ref="input" で、その親要素の DOM ノードが公開されます (ここでは currency-input の内部で this の中）、つまり this.$refs["input"] (または this.$refs.input ).

参照してください。 https://vuejs.org/v2/api/#ref

DOM を直接操作しない方が良い場合が多いとはいえ、いくつかの使用例があります。例えば、ここでの正当な使用例は、この入力にフォーカスを当てることです。 this.$refs["input"].focus() をコンポーネントのメソッドで使用することができます...