SoFunction
Updated on 2025-04-03

vue basically uses --refs to get an instance of a component or element

Description: vm.$refs An object that holds all child components (or HTML elements) that have registered ref

Use: In HTML element, add the ref attribute, and then get it in JS via the vm.$refs. attribute

Note: If you are getting a child component, then you can get the data and methods in the child component through ref.

Add ref attribute

<div >
  <h1 ref="h1Ele">This isH1</h1>
  <hello ref="ho"></hello>

  <button @click="getref">GetH1element</button>
 </div>

Get all components or elements registered with ref

methods: {
    getref() {
     // Indicates that from the $refs object, the value of the ref attribute is: h1ele DOM element or component      (this.$refs.);
      this.$refs. = 'red';// Modify the html style
     (this.$);// Get component data     (this.$);// Method to get components    }
   }

The above article "Vue Basics" uses --refs to obtain components or elements is all the content I share with you. I hope you can give you a reference and I hope you can support me more.