Home  >  Article  >  Web Front-end  >  Detailed explanation of the specific usage of ref in vue2

Detailed explanation of the specific usage of ref in vue2

小云云
小云云Original
2018-01-20 13:18:282423browse

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(&#39;navbar&#39;,{
    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(&#39;[ref=demo]&#39;);

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn