Explication détaillée de l'utilisation de $refs dans vue

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de $refs in vue. Quelles sont les précautions lors de l'utilisation de $refs in vue. Voici un cas pratique, jetons un oeil.

Mais après la liaison avec ref, nous n'avons pas besoin d'obtenir le nœud dom Nous pouvons directement lier input1 à l'entrée ci-dessus, puis l'appeler dans $refs.

Ensuite, appelez-le comme ceci en javascript : this.$refs.input1 Cela peut réduire la consommation d'obtention des nœuds dom

est utilisé comme suit :

. 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>

Ce qui suit présente l'utilisation de base de vue $refs. Le code spécifique est le suivant :

<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>

. De manière générale, pour obtenir des éléments DOM, <a href="http://www.php.cn/code/658.html" target="_blank">document<code><a href="http://www.php.cn/code/658.html" target="_blank">document</a>.querySelector（".input1"）.querySelector（".input1"） Récupérez ce nœud dom, puis récupérez la valeur de input1.

Mais après la liaison avec ref, nous n'avons plus besoin d'obtenir le nœud dom. Nous pouvons directement lier input1 à l'entrée ci-dessus, puis l'appeler dans $refs.

Alors appelez-le comme ceci en javascript : this.$refs.input1 Cela peut réduire la consommation d'obtention des nœuds dom

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article, veuillez venir pour des informations plus intéressantes. Faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Résumé de la méthode de chargement asynchrone Vue+webpack

le routeur vue sépare toutes les sous-routes en composants indépendants

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!