Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie ref in vue2

小云云
Freigeben: 2018-01-02 09:47:35
Original
1870 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die spezifische Verwendung von ref in vue2 vor. Der Herausgeber findet es ziemlich gut. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Definieren wir zunächst zwei Komponenten

HTML-Teil


  <p id="app">
   <navbar ></navbar>
   <pagefooter ></pagefooter>
  </p>
Nach dem Login kopieren

js-Teil


  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
     }
    }
   });
Nach dem Login kopieren

Wie kann ich hier direkt auf die Navigationselemente der Navigationsleiste und den Fußzeilenwert der Seitenfußzeile zugreifen? Dies verwendet ref

2. Verwendung von ref

Komponenten ändern


  <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);
    }
   })
Nach dem Login kopieren

Wenn Sie verwenden nur ein gemeinsames Tag


<p ref="demo"></p>
Nach dem Login kopieren

dessen Funktion die gleiche ist wie:


document.querySelector(&#39;[ref=demo]&#39;);
Nach dem Login kopieren

hat der gleiche Effekt

Verwandte Empfehlungen:

Detaillierte Erklärung, wie jQuery die href eines Tags durchläuft und ändert

react.js gibt die Logo-Referenz, Inhalt abrufen

Detaillierte Erläuterung der Ausführungsreihenfolge von onclick und href eines Tags in HTML

Das obige ist der detaillierte Inhalt vonSo verwenden Sie ref in vue2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage