Specific usage of ref in vue2

This article introduces the specific usage of ref in vue2. I will share it with you. The details are as follows.

1. Let's define two components first

html part

  <div >
   <navbar ></navbar>
   <pagefooter ></pagefooter>
  </div>

js part

  ('navbar',{
    template:'<div>{{navs}}</div>',
    data:function () {
     return {
      navs:1
     }
    }
   });
  ('pagefooter',{
    template:'<div>{{footer}}</div>',
    data:function () {
     return {
      footer:11
     }
    }
   });

How to directly access the navs and pagefooter footer values of navbar? This uses ref

2. Use of ref

Modify components

  &lt;div &gt;
   &lt;navbar ref="navbar"&gt;&lt;/navbar&gt;
   &lt;pagefooter ref="pagefooter"&gt;&lt;/pagefooter&gt;
  &lt;/div&gt;
   new Vue({
    el:'#app',
    created:function(){
     
    },
    mounted:function () {
     this.$=222
     //ready,
     //How to directly access the navs and pagefooter footer values of navbar?      (this.$);
      (this.$);
    }
   })

If only one normal tag is used

<div ref="demo"></div>

His role and:

('[ref=demo]');

The same effect

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.