Detailed explanation of Vue ref ($refs) usage

ref has three uses

• ref acts on ordinary elements, use this.ref.name to get dom elements
• ref acts on sub-components, use this.ref.name to get the component instance, and you can use all methods of the component
• Use v-for and ref to obtain a set of data or dom nodes

Precautions

• ref needs to be applied after the DOM rendering is completed. When using it, make sure that the DOM has been rendered. For example, call it in the life cycle mounted(){} hook, or call it in this.$nextTick(()=>{}).

• If ref is looped out and there are multiple duplicate names, then the ref value will be an array. At this time, to get a single ref, you only need to loop

Application

ref acts on external components

<div id="ref-outside-component" v-on:click="consoleRef">
      <component-father ref="outsideComponentRef">
      </component-father>
      <p>ref is on the outer component</p>
  </div>

  var refoutsidecomponentTem={
      template:"<div class='childComp'><h5>I am a child component</h5></div>"
  };
  var refoutsidecomponent=new Vue({
      el:"#ref-outside-component",
      components:{
          "component-father":refoutsidecomponentTem
      },
      methods:{
          consoleRef:function () {
              console.log(this); // #ref-outside-component vue instance
              console.log(this.$refs.outsideComponentRef); // div.childComp vue instance, component instance
          }
      }
  });

ref acts on external elements

<div id="ref-outside-dom" v-on:click="consoleRef" >
    <component-father>
    </component-father>
    <p ref="outsideDomRef">ref is on the outside element</p>
</div>

var refoutsidedomTem={
     template:"<div class='childComp'><h5>I am a child component</h5></div>"
};
var refoutsidedom=new Vue({
     el:"#ref-outside-dom",
     components:{
         "component-father":refoutsidedomTem
     },
     methods:{
         consoleRef:function () {
             console.log(this); // #ref-outside-dom vue instance
             console.log(this.$refs.outsideDomRef); // <p>The tag dom element ref is on the outside element</p>
         }
     }
});

ref acts on the elements inside--locally registered components

<div id="ref-inside-dom">
     <component-father>
     </component-father>
     <p>ref is on the element inside</p>
</div>

var refinsidedomTem={
     template:"<div class='childComp' v-on:click='consoleRef'>" +
                    "<h5 ref='insideDomRef'>I am a child component</h5>" +
               "</div>",
     methods:{
         consoleRef:function () {
             console.log(this); // div.childComp vue instance
             console.log(this.$refs.insideDomRef); // <h5 >I am a child component</h5>
         }
     }
};
var refinsidedom=new Vue({
     el:"#ref-inside-dom",
     components:{
         "component-father":refinsidedomTem
     }
});

ref acts on the elements inside - globally registered components

<div id="ref-inside-dom-all">
     <ref-inside-dom-quanjv></ref-inside-dom-quanjv>
</div>

Vue.component("ref-inside-dom-quanjv",{
     template:"<div class='insideFather'> " +
                 "<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +
                 " <p>ref is on the element inside--global registration </p> " +
               "</div>",
     methods:{
         showinsideDomRef:function () {
             console.log(this); //this here is actually div.insideFather
             console.log(this.$refs.insideDomRefAll); // <input type="text">
         }
     }
});

var refinsidedomall=new Vue({
     el:"#ref-inside-dom-all"
});