Detaillierte Erläuterung der Verwendung von Ref-Schritten in vue2

Dieses Mal werde ich Ihnen die Schritte zur Verwendung von ref in vue2 ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung von ref in vue2?

Dieser Artikel stellt die spezifische Verwendung von ref in vue2 vor und teilt sie mit allen. Die Details sind wie folgt.

1. Definieren wir zunächst zwei Komponenten

HTML-Teil

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

js Teil

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

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

Komponente ändern

  <p id="app">
   <navbar ref="navbar"></navbar>
   <pagefooter ref="pagefooter"></pagefooter>
  </p>
   new Vue({
    el:'#app',
    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);
    }
   })

Wenn Sie einfach ein normales Tag verwenden

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

Seine Rolle ist dieselbe wie:

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Ref-Schritten in vue2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!