'ref' विशेषता का असली उद्देश्य क्या है?

Question

मैं वास्तव में इनपुट तत्व की "रेफरी" विशेषता से उलझन में हूं। मैंने इसे कभी भी अपने ज्ञान के आधार पर नहीं सुना है और इसके बारे में कुछ सार्थक सामग्री नहीं मिल सकती है। कोड 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'], 

कि इनपुट के बराबर रेफरी विशेषता के मान का अर्थ क्या है?

Answer 1

रेफरी विशेषता का मुख्य उद्देश्य माता-पिता $refs विशेषता में कुंजी होने के द्वारा डीओएम तत्व चुनने योग्य बनाना है।

उदाहरण के लिए अपने इनपुट तत्व, ref="input" साथ, अपने डोम नोड अपनी मूल में (यहाँ मुद्रा-इनपुट this अंदर), बेनकाब होगा this.$refs["input"] (या this.$refs.input) के रूप में।

देखें: https://vuejs.org/v2/api/#ref

यह कई उपयोग के मामलों है भले ही वह अक्सर बेहतर जब संभव डोम सीधे हेरफेर नहीं होगा। उदाहरण के लिए, यहां एक वैध उपयोग केस इस इनपुट पर ध्यान केंद्रित करना है: इसके लिए आप घटक की विधि में this.$refs["input"].focus() का उपयोग कर सकते हैं ...