Eine kurze Diskussion über die Verwendung von $refs in vue.js (mit Code)

Verwandte Empfehlungen: „vue.js Tutorial“

• Beschreibung: vm.$refs ist ein Objekt, das alle Unterkomponenten (oder HTML-Elemente) enthält, die eine registrierte Referenz haben

• Verwendung: Fügen Sie im HTML-Element das ref-Attribut hinzu und rufen Sie es dann über das vm.$refs-Attribut in JS ab. Hinweis: Wenn Sie eine Unterkomponente erhalten, können Sie die Daten und Methoden in der Unterkomponente über ref abrufen

• Um DOM-Elemente zu erhalten, müssen Sie im Allgemeinen document.querySelector(".input1") verwenden, um den DOM-Knoten abzurufen, und dann den Wert von input1 abrufen.
  Aber nach der Bindung mit ref müssen wir den Dom-Knoten nicht mehr abrufen. Wir können input1 direkt an die obige Eingabe binden und ihn dann in $refs aufrufen.

Dann rufen Sie dies in Javascript auf: this.$refs.input1 Dadurch wird der Verbrauch beim Abrufen von Dom-Knoten reduziert. Der Beispielcode lautet wie folgt:

<-- 添加ref属性 -->
<div id="app">
	<input type="text" ref="input1"/>
    <button @click="add">添加</button>
</div>

// 获取注册过 ref 的所有组件或元素
<script>
    new Vue({
        el: "#app",
        methods:{
        add:function(){
            this.$refs.input1.value ="22"; //this.$refs.input1  减少获取dom节点的消耗
            }
        }
    })
</script>

Weitere Programmierkenntnisse finden Sie unter: document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.input1Programmierunterricht

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Verwendung von $refs in vue.js (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!