Explication détaillée de la fonction ref dans Vue3 : accès direct aux éléments du composant

Explication détaillée de la fonction ref dans Vue3 : accès direct aux éléments des composants

Vue3 est la dernière version du framework Vue, qui apporte de toutes nouvelles API, dont une très L'API importante est la fonction ref. Dans cet article, nous expliquerons en détail le rôle et l'utilisation de la fonction ref, et comment accéder directement aux éléments des composants dans Vue3.

1. Le rôle et l'utilisation de la fonction ref

La fonction ref est une API réactive dans Vue3, qui fournit une méthode simple pour obtenir un référence à un élément DOM, un sous-composant ou à toute autre instance de Vue. Dans un composant Vue, vous pouvez utiliser la fonction ref pour enregistrer une référence à un élément ou un composant.

Par exemple, dans un composant Vue, si on veut obtenir une référence à un élément d'entrée, on peut écrire comme ceci :

<template>
  <div>
    <input ref="myInput" />
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myInput); // 获取myInput元素
  }
}
</script>

Dans le code ci-dessus, on utilise fonction ref pour enregistrer une référence nommée myInput. Dans la fonction hook de cycle de vie montée, nous pouvons utiliser this.$refs.myInput pour obtenir l'élément DOM réel.

En plus des éléments DOM, la fonction ref peut également être utilisée pour obtenir des références à des sous-composants. Par exemple :

<template>
  <div>
    <my-component ref="myComponent"></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    'my-component': MyComponent
  },
  mounted() {
    console.log(this.$refs.myComponent); // 获取MyComponent组件实例
  }
}
</script>

Dans le code ci-dessus, nous avons enregistré une référence nommée myComponent, qui pointe vers l'instance du composant MyComponent.

2. Accéder directement aux éléments des composants dans Vue3

Dans Vue3, la fonction ref ne peut pas seulement être utilisée pour obtenir des éléments ou sous-composants DOM dans les composants Références peut également accéder directement à l’élément composant lui-même. Cette approche nous permet d'exploiter les éléments des composants plus efficacement sans utiliser d'opérations DOM.

Par exemple, dans Vue3, on peut accéder directement à l'attribut value de l'élément d'entrée sans utiliser this.$refs.myInput.value. Comme indiqué ci-dessous :

<template>
  <div>
    <input ref="myInput" v-model="message" />
    <button @click="showMessage">显示消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    showMessage() {
      console.log(this.$refs.myInput.value); // 直接访问input元素的value属性
      console.log(this.message); // 通过双向绑定访问message属性
    }
  }
}
</script>

Dans le code ci-dessus, nous accédons directement à l'attribut value de l'élément d'entrée. Cette méthode est plus intuitive et concise que l'utilisation de this.$refs.myInput.value.

En plus d'accéder aux attributs de l'élément, nous pouvons également accéder directement à la méthode de l'élément via la fonction ref. Par exemple, dans Vue3, on peut accéder directement à la méthode focus de l'élément d'entrée, comme indiqué ci-dessous :

<template>
  <div>
    <input ref="myInput" />
    <button @click="focusInput">获取焦点</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.myInput.focus(); // 直接调用input元素的focus方法
    }
  }
}
</script>

Dans le code ci-dessus, on appelle directement la méthode focus de l'élément d'entrée, ce qui est mieux que d'utiliser La méthode this.$refs.myInput.focus() est plus intuitive et concise.

3. Summary

Dans Vue3, la fonction ref peut non seulement être utilisée pour obtenir des références à des éléments ou sous-composants DOM dans des composants, mais aussi directement Accédez à l'élément composant lui-même, de cette manière nous permet de faire fonctionner l'élément composant plus efficacement. Dans le développement réel, nous pouvons choisir différentes méthodes d'utilisation en fonction des besoins et les combiner avec d'autres API fournies par Vue3 pour gérer les éléments des composants de manière plus flexible.

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!