Comment utiliser $réfs

Cette fois, je vais vous montrer comment utiliser $refs et quelles sont les précautions d'utilisation de $refs. Ce qui suit est un cas pratique, jetons un coup d'oeil.

De manière générale, pour obtenir l'élément DOM, vous devez document.querySelector（".input1"） obtenir le nœud dom, puis obtenir la valeur de input1.

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 de nœuds dom

L'utilisation est la suivante :

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 est une introduction à 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, vous devez

Obtenir ce nœud dom, puis obtenir la valeur de input1. document.querySelector（".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 :

Gestion des mises à jour de la méthode des composants parents pour les composants enfants qui ne peuvent pas être rendus

Comment utiliser vuex pour faire fonctionner des objets d'état

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!