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>
<script> new Vue({ el: "#app", methods:{ add:function(){ this.$refs.input1.value ="test"; //this.$refs.input1 减少获取dom节点的消耗 } } }) </script>
<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>
Obtenir ce nœud dom, puis obtenir la valeur de input1. document.querySelector(".input1")
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!