Premiers pas avec le développement VUE3 : utilisation des composants

Vue est un framework JavaScript populaire, notamment dans le développement d'applications Web. Avec la sortie de la version VUE3, VUE présente non seulement les avantages précédents, mais ajoute également de nouvelles fonctionnalités, telles que la programmation orientée objet et l'amélioration des performances. Cet article expliquera comment utiliser les composants dans VUE3 et comment utiliser les composants pour créer une page Web simple.

Qu'est-ce qu'un composant VUE ?

Les composants VUE sont des modules de code réutilisables utilisés pour créer des interfaces utilisateur. Chaque composant contient du code HTML, JavaScript et CSS et peut être utilisé directement dans le code en tant qu'entité unique.

Prenons comme exemple un composant bouton simple. Voici son code :

<template>
  <button>{{ buttonText }}</button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    buttonText: {
      type: String,
      required: true
    }
  }
}
</script>

<style>
button {
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}
</style>

Ce composant bouton a une propriété buttonText pour le texte affiché sur le bouton. Lors de l'utilisation du composant, vous devez transmettre cet attribut. Voici un exemple de code qui utilise ce composant :

<template>
  <div>
    <MyButton buttonText="Click me!" />
  </div>
</template>

<script>
import MyButton from './MyButton.vue'

export default {
  components: {
    MyButton
  }
}
</script>

Ici, le composant est introduit dans Vue puis utilisé dans le modèle.

Créer et utiliser des composants

Pour créer un nouveau composant, vous devez utiliser la méthode Vue.component() fournie par Vue. Cette méthode reçoit deux paramètres : le nom du composant et l'objet qui définit le composant. Voici l'exemple de composant le plus simple :

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

Dans cet extrait de code, tous les autres codes, à l'exception du nom du composant, sont définis dans l'objet. Les variables de composant sont généralement définies à l'aide de méthodes idiomatiques, telles que l'utilisation de lettres majuscules dans le nom de la classe pour distinguer le composant du balisage HTML ordinaire.

Introduisez ce composant dans Vue :

<template>
  <MyComponent />
</template>

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

export default {
  components: {
    MyComponent
  }
}
</script>

Vous pouvez utiliser ce composant dans le modèle en ce moment.

Utilisation de composants dans VUE3

VUE3 offre une meilleure façon de créer et d'utiliser des composants. Dans VUE3, utilisez la méthode createApp pour créer une application Vue et utilisez la méthode app.component() pour enregistrer les composants. Voici l'exemple de code :

<template>
  <div>
    <MyComponent />
  </div>
</template>

<script>
import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'

const app = createApp({})
app.component('MyComponent', MyComponent)
app.mount('#app')
</script>

Dans le code ci-dessus, la méthode createApp est utilisée pour créer une application Vue et app.component() est utilisée pour enregistrer le composant. La dernière ligne de code est utilisée pour monter l'application dans le document HTML.

Paramètres de transmission des composants

Comme mentionné ci-dessus, une utilisation courante des composants dans VUE consiste à transmettre des propriétés et des événements. Par exemple, dans l'extrait de code suivant : l'attribut

<MyComponent :width="200" @clicked="onClick" />

width sera transmis au composant, l'événement clicked est déclenché lorsque l'on clique sur le composant, et onClick est ici le gestionnaire d'événements.

Afin d'utiliser les propriétés et événements transmis dans le composant, vous devez utiliser les accessoires et les méthodes d'émission fournies par VUE. Par exemple :

<template>
  <div :style="{ width: width + 'px' }" @click="$emit('clicked')">
    {{ message }}
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    width: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

Dans un composant, les propriétés sont déclarées dans le cadre de l'objet props. Par défaut, les accessoires sont de n'importe quel type. Dans cet exemple, l'attribut width est défini comme un type numérique et se voit attribuer une valeur par défaut de 100. Dans le modèle, la largeur est transmise et utilisée pour mettre à jour le style du composant.

Utiliser des événements dans les composants est très simple, il suffit d'utiliser la méthode $emit pour appeler l'événement. Dans cet exemple, l'événement clicked est appelé lorsque l'utilisateur clique sur le composant.

Summary

Vue est un puissant framework JavaScript, et son système de composants est un élément important de la création d'applications Web réutilisables et évolutives. Cet article explique comment utiliser Vue pour créer et utiliser des composants, utiliser la méthode createApp dans Vue3 pour créer une application Vue et utiliser la méthode app.component() pour enregistrer des composants. Les composants peuvent utiliser des accessoires et émettre des méthodes pour transmettre des propriétés et des événements. J'espère que cet article sera utile aux développeurs qui souhaitent apprendre VUE.

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!