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>
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
Komponenten ä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 verwenden nur ein gemeinsames Tag
<p ref="demo"></p>
dessen Funktion die gleiche ist wie:
document.querySelector('[ref=demo]');
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!