Une brève discussion sur l'utilisation de $refs dans vue.js (avec code)

Recommandations associées : "tutoriel vue.js"

• Description : vm.$refs est un object , contient tous les sous-composants (ou éléments HTML) qui ont enregistré une ref

• Utilisation : dans l'élément HTML, ajoutez l'attribut ref, puis transmettez l'attribut vm.$refs. en JS Pour obtenir

• Remarque : Si vous obtenez un sous-composant, vous pouvez obtenir les données et les méthodes du sous-composant via ref

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 plus 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. L'exemple de code est le suivant :

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

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

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!