what's the real purpose of 'ref' attribute?

user_7119220 0
Viewed 72991

I'm really confused with the "ref" attribute of the input element. I've never heard it based on my knowledge and can't find some meaningful materials about it.The code is in vue.js offical documents.

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

This is code about the component:

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

what's the meaning of the value of ref attribute that equals to input?

vue.js
4 Answers
  • $refs is used to select/target HTML elements
  • $refs is like the document.querySelector('.el') in vanilla JS or $('.el') in jQuery
  • $refs can be accessed inside or outside your VueJS instance.
  • $refs are NOT REACTIVE unlike data properties.

Thus, it is recommended to use $refs when you want to listen/manipulate/change the value of an element that doesn't connected/controlled to any Vue instance properties to avoid conflicts.

user_99447890

There's one use case I find ref attribute particularly useful is in Vue component testing. Adding ref attribute to your html element makes it easily retrieved in testing (e.g. const fooRef = wrapper.find({ ref: 'foo' })). This is particularly handy when you do not want to add id or class attributes as they are usually also used for styling purposes, for example, adding classes just for identifying element could result in unexpected styles if these names are already (or later on) being used in global style sheets.

user_6404020

$refs are only populated after the component has been rendered. It is only meant as an escape hatch for direct child manipulation - you should avoid accessing $refs from within templates or computed properties.

reference - https://v3.vuejs.org/guide/component-template-refs.html

user_34286260
Related