'ref'属性の本当の目的は何ですか？

Question

私は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属性の値の意味は何ですか？

Answer 1

ref属性の主な目的は、親要素$refsのキーでDOM要素を選択可能にすることです。 ref="input"と例えば

そこにあなたの入力要素は、this.$refs["input"]（またはthis.$refs.input）として、（ここでは通貨入力this内部の）親にそのDOMノードを公開します。

参照：https://vuejs.org/v2/api/#ref

それが直接DOMを操作しないように、多くの場合、より良い時に可能である場合でも、いくつかのユースケースを持っています。例えば、合法的なユースケースは、この入力に焦点を当てることです：そのためには、コンポーネントのメソッドでthis.$refs["input"].focus()を使用することができます...