L'utilisation de base de ref sous Vue---kalrry

1. Introduction

1. Dans js, l'id est défini, puis l'arborescence dom est obtenue par document.getelementbyid(hello) pour l'opération.
2. Dans le framework vue, les paramètres sont obtenus via les paramètres ref. Cette chose a un avantage. Pour les éléments ordinaires tels que les boutons, il s'agit d'une acquisition d'arborescence DOM comme js, mais pour les composants, vous pouvez obtenir l'intégralité de l'objet Component, nous pouvons obtenir le contenu du composant de cette manière pour fonctionner.
3. ref est utilisé pour enregistrer les références aux éléments ou sous-composants DOM. Les informations de référence sont enregistrées par rapport à l'objet $refs du composant parent. Si elles sont utilisées sur un élément DOM normal, les informations de référence sont l'élément ; si elles sont utilisées sur un composant enfant, les informations de référence sont l'instance du composant
4. Tout d'abord, la référence de ref est équivalente à un nœud DOM (s'il s'agit d'un composant enfant, il pointe vers son instance), et c'est une valeur de type string. En termes simples, il est similaire au js natif utilisant document.getElementById("#id"), mais similaire, la différence entre eux est que Vue contrôle le DOM virtuel, ce qui signifie qu'il n'y a pas d'attribut de cette référence au début Cet attribut est dans Il est ajouté au DOM virtuel après la création de l'instance de Vue. Par conséquent, à la fin du document officiel, il est rappelé aux développeurs que le résultat de ref ne peut pas être lié aux données dans le modèle.

Le rôle de ref
5. Utilisé pour obtenir des éléments dom
6. Obtenir des composants (data\ method in)

2. ref obtient l'élément dom

Lorsque vue doit manipuler des éléments dom, vous pouvez utiliser l'attribut ref fourni par vue

1. Ajoutez un attribut ref à la balise, puis donnez à cet attribut un alias
2. Cet élément peut être obtenu via le tableau this.$refs['alias']
3. En plus de la méthode array, vous pouvez également utiliser la méthode objet this.$refs. nom de la propriété, mais il est recommandé d'utiliser la méthode array

Exemple

<div id="app">
	<p ref="pp">使用ref获取dom元素</p>
	<button type="button" @click="getInfo">点击</button>
</div>
<script type="text/javascript">
	new Vue({
    
    
		el:'#app',
		methods:{
    
    
			getInfo(){
    
    
				alert("p标签中的内容是："+this.$refs['pp'].innerText)
			}
		}
	})
</script>

3. composant d'acquisition de référence

1. Ajoutez un attribut ref au composant et attribuez un alias à ce composant
2. Vous pouvez obtenir ce composant via this.$refs['alias']. Après avoir obtenu le composant, vous pouvez obtenir les propriétés du composant et vous pouvez également appeler la méthode dans le composant .

Exemple

<div id="app">
	<child ref="child"></child>
	<button type="button" @click="getInfo">获取组件中的属性</button>
	<button type="button" @click="getFunction">调用组件中的方法</button>
</div>
<script type="text/javascript">
	//定义组件
	Vue.component('child',{
    
    
		template:`
		 <div style="width:200px;height:200px;border:1px solid;">
		   <h2>组件</h2>
		   <p>{
     
     {info}}</p>
		   <button type="button" @click="showInfo">组件内部的方法</button>
		  </div>
		`,
		data(){
    
    
			return {
    
    
				info:'使用ref获取组件'
			}
		},
		methods:{
    
    
			showInfo(){
    
    
				alert(this.info)
			}
		}
	})
	new Vue({
    
    
		el:'#app',
		methods:{
    
    
			getInfo(){
    
    
				alert("组件中info属性的值是："+this.$refs['child'].info)
			},
			getFunction(){
    
    
				this.$refs['child'].showInfo()
			}
		}
	})
</script>