Vue3 Création de composants monofichiers (SFC)

Le composant monofichier de Vue (c'est-à-dire*.vueun fichier, en anglais : Single-File Component, abrégé en SFC) est un format de fichier spécial qui permet d'encapsuler le template, la logique et les styles d'un composant Vue dans un seul fichier.

Dans Vue3, vous pouvez utiliser.vueun fichier pour créer des composants monofichiers (Single File Components, SFCs). Ce fichier contient le template du composant, du code JavaScript et des styles CSS.

Maintenant, nous allons supprimernpm init vue@latesttout le contenu du projet d'exemple créé par la commande (voirInstallation de Vue3), afin de pouvoir créer notre propre page web simple en Vue.

Avant de commencer à écrire du code, supprimez tout le contenu à l'intérieur des balises <template>, <script> et <style>, ainsi que tous les attributs comme setup ou scoped.

Votre fichier App.vue devrait maintenant ressembler à ceci :

Fichier App.vue :

<script></script>

<template></template>

<style></style>

En même temps, nous pouvons d'abord vidersrcle dossier dans le répertoireassetsetcomponents, et nous pouvons ajouter les fichiers à l'intérieur plus tard nous-mêmes.

Modifiez le code du fichier main.js comme suit :

Code du fichier main.js :

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Maintenant, nous avons créé un projet simple. Écrivez le code suivant dans le fichier App.vue :

Code du fichier App.vue :

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

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

<style>
h1 {
  color: blue;
}
</style>

Dans l'exemple ci-dessus, nous avons défini un composant simple contenant un titre. Le template du composant inclut un élément <h1>, qui utilise la syntaxe de template de Vue3 pour lier la propriété message au contenu textuel de cet élément.

La partie JavaScript contient une fonction data qui renvoie un objet contenant la propriété message, que nous avons liée au template.

Enfin, le style CSS définit la couleur du titre en bleu.

Dans la partie JavaScript du composant, nous avons utilisé la nouvelle syntaxe `export default`, qui nous permet d'exporter la définition du composant en tant qu'objet par défaut. Dans Vue3, nous pouvons utiliser cette syntaxe pour définir des composants sans avoir à utiliser la fonction `Vue.component` comme dans Vue2.

Visitezhttp://localhost:5173/, le résultat d'exécution du code ci-dessus est :

Utilisation des composants

Après avoir défini un composant, nous pouvons utiliser ce composant dans d'autres composants.

Pour utiliser un composant, nous devons d'abord créer le composant. Par exemple, l'exemple suivant, dans le répertoire./src/components/, crée le fichier de composantHelloExample.vue, et le code est le suivant :

Code du fichier ./src/components/HelloExample.vue :

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

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

<style>
h1 {
  color: red;
}
</style>

Ensuite, nous importons et définissons le composant dans le fichier ./src/main.js :

Code du fichier ./src/main.js :

import { createApp } from 'vue'

import App from './App.vue'
import HelloExample from './components/HelloExample.vue'

const app = createApp(App)
app.component('hello-example', HelloExample) // Balise personnalisée
app.mount('#app')

Dans le template du composant parent, nous pouvons utiliser des balises personnalisées pour importer le composant enfant, comme le montre le code du fichier App.vue ci-dessous :

Code du fichier App.vue

<template>
  <div>
    <hello-example></hello-example>
  </div>
</template>

Visitezhttp://localhost:5173/, le résultat d'exécution du code ci-dessus est :

Autres extensions