How to use ref in vue2

This article mainly introduces the specific use of ref in vue2. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

1. Let’s first define two components

html part

  <p id="app">
   <navbar ></navbar>
   <pagefooter ></pagefooter>
  </p>

js part

  Vue.component('navbar',{
    template:&#39;<p>{{navs}}</p>&#39;,
    data:function () {
     return {
      navs:1
     }
    }
   });
  Vue.component(&#39;pagefooter&#39;,{
    template:&#39;<p>{{footer}}</p>&#39;,
    data:function () {
     return {
      footer:11
     }
    }
   });

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

2. Use of ref

Modify components

  <p id="app">
   <navbar ref="navbar"></navbar>
   <pagefooter ref="pagefooter"></pagefooter>
  </p>
   new Vue({
    el:&#39;#app&#39;,
    created:function(){
     
    },
    mounted:function () {
     this.$refs.navbar.navs=222
     //ready,
     //这里怎么直接访问navbar的navs和pagefooter的footer值呢，
      console.log(this.$refs.navbar.navs);
      console.log(this.$refs.pagefooter.footer);
    }
   })

If you only use a common tag

<p ref="demo"></p>

, its function is the same as:

document.querySelector('[ref=demo]');

Related recommendations:

detailed explanation of jQuery looping through and changing the href of a tag

react.js gives the identifier ref and gets the content

Detailed explanation of the execution order of onclick and href of a tag in html

The above is the detailed content of How to use ref in vue2. For more information, please follow other related articles on the PHP Chinese website!