So verwenden Sie $refs

Dieses Mal zeige ich Ihnen, wie Sie $refs verwenden und welche Vorsichtsmaßnahmen für die Verwendung von $refs gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Im Allgemeinen müssen Sie zum Abrufen des DOM-Elements document.querySelector（".input1"） den DOM-Knoten und dann den Wert von Eingabe1 abrufen.

Aber nach der Bindung mit ref müssen wir den Dom-Knoten nicht abrufen. Wir können input1 direkt an die obige Eingabe binden und ihn dann in $refs aufrufen.

Dann nennen Sie es in Javascript so: this.$refs.input1 Dies kann den Verbrauch beim Abrufen von Dom-Knoten reduzieren.

wird wie folgt verwendet:

HTML:

<p id="app">
  <input type="text" ref="input1"/>
  <button @click="add">添加</button>
</p>

JS:

<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="test"; //this.$refs.input1 减少获取dom节点的消耗
    }
  }
})
</script>

Lassen Sie mich Ihnen die grundlegende Verwendung von vue $refs vorstellen. Der spezifische Code lautet wie folgt:

<p id="app">
  <input type="text" ref="input1"/>
  <button @click="add">添加</button>
</p>
<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗
    }
  }
})
</script>

Im Allgemeinen benötigen Sie, um das DOM-Element zu erhalten um document.querySelector（".input1"） den Dom-Knoten abzurufen und dann den Wert von input1 abzurufen.

Aber nach der Bindung mit ref müssen wir den Dom-Knoten nicht mehr erhalten. Wir können input1 direkt an die obige Eingabe binden und ihn dann in $refs aufrufen.

Dann nennen Sie es in Javascript so: this.$refs.input1 Dies kann den Verbrauch beim Abrufen von Dom-Knoten reduzieren

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte kommen Sie für weitere spannende Informationen. Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Behandlung von Methodenaktualisierungen der übergeordneten Komponente für untergeordnete Komponenten, die nicht gerendert werden können

So verwenden Sie Vuex für Zustandsobjekte bedienen

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