Detailed explanation of the specific usage of 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 the differences between href and src, link and @import in css

react.js identifies ref , Get the content

Introduction to the ref attribute in the View component in react native

The above is the detailed content of Detailed explanation of the specific usage of ref in vue2. For more information, please follow other related articles on the PHP Chinese website!