Où mettre l'initialisation d'uniapp ceci

Dans le processus de développement avec Uniapp, nous utiliserons le mot-clé this à de nombreux endroits. Par exemple, dans la fonction définie dans la méthode méthodes, this fait référence à l'instance Vue. Cependant, dans les fonctions de cycle de vie créées et montées du composant, cela fait référence au composant lui-même. Alors, comment utiliser correctement ce mot-clé dans Uniapp ? Surtout lors de l'initialisation, où devrions-nous placer cela ?

Tout d’abord, jetons un coup d’œil au processus d’initialisation dans Uniapp. Lors de la création d'un nouveau projet Uniapp, le système générera automatiquement un fichier main.js par défaut. Dans ce fichier, nous pouvons voir le code suivant :

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

const app = new Vue({
  ...App
})
app.$mount()

Comme vous pouvez le voir, dans ce fichier, nous avons introduit les composants Vue et App via l'instruction d'importation et créé une application d'instance Vue. Dans cet exemple, nous n'avons pas lié manuellement le mot-clé this, car Vue le pointera automatiquement vers l'instance Vue actuelle.

Lorsque nous écrivons des composants, nous pouvons également utiliser directement ce mot-clé pour accéder aux données et méthodes sur l'instance Vue. Par exemple, dans la méthode méthodes d'un composant, nous pouvons accéder aux données sur l'instance Vue comme ceci :

methods: {
  handleClick() {
    console.log(this.title)
  }
}

This.title fait ici référence à l'attribut title sur l'instance Vue.

Ensuite, examinons comment ce mot-clé est utilisé dans les fonctions de cycle de vie créées et montées du composant.

Dans la fonction de cycle de vie créée du composant, nous pouvons effectuer certaines opérations d'initialisation du composant. Par exemple, nous pouvons appeler l'interface d'arrière-plan ici pour obtenir certaines données, puis les attribuer à l'attribut data du composant pour restituer le composant. Ici, cela fait référence à l'instance actuelle du composant. Par exemple :

created() {
  this.getData()
},
methods: {
  async getData() {
    const res = await this.$http.get('/api/data')
    this.list = res.data
  }
}

La méthode this.$http.get ici est une méthode intégrée dans Uniapp, qui est utilisée pour lancer des requêtes réseau. Nous attribuons les données renvoyées par l'arrière-plan à l'attribut list du composant, et les données peuvent être affichées dans le modèle du composant via {{list}}.

Dans la fonction de cycle de vie montée du composant, nous pouvons accéder aux éléments DOM rendus. Ici, cela fait également référence à l'instance actuelle du composant. Par exemple, nous pouvons obtenir ici la largeur et la hauteur d’un élément et mettre à jour les données. Par exemple :

mounted() {
  const element = this.$refs.container
  const width = element.offsetWidth
  const height = element.offsetHeight
  this.width = width
  this.height = height
}

This.$refs.container voici le nœud d'élément dont la référence est conteneur dans le composant d'accès. Nous obtenons la largeur et la hauteur de l'élément et les attribuons aux propriétés de largeur et de hauteur du composant.

Pour résumer, le mot-clé this dans Uniapp fait généralement référence à l'instance Vue actuelle ou à l'instance de composant, qui peut être utilisée en fonction du scénario d'utilisation spécifique. Il n'y a également aucun problème à l'utiliser dans les fonctions de cycle de vie créées et montées du composant. Notez simplement que cela fait référence à l'instance du composant.

Quant à l'endroit où placer l'initialisation, nous pouvons la placer dans la fonction de cycle de vie créée du composant ou dans la fonction de cycle de vie créée de l'instance Vue. La décision spécifique peut être prise en fonction des besoins réels.

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!