VueJs pour débutant Partie VueJs Créer, importer et utiliser un composant

Création de votre premier composant

---

Qu'est-ce qu'un composant ?
Les composants sont les éléments constitutifs d'une application Vue. Chaque composant a sa propre fonctionnalité et sa propre vue. Les composants peuvent être réutilisés dans toute l'application. Un exemple de composant est une barre de navigation accessible sur différentes pages.

Création d'un composant de base

• Créez un nouveau fichier de composants appelé HelloWorld.vue (vous pouvez changer le nom du fichier si vous le souhaitez) dans le dossier des composants (créez un nouveau dossier de composants s'il n'existe pas déjà).

• Composant HelloWorld :
  

<template>
  <div>
    <h1>Hello, World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

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

• importer et utiliser le composant HelloWord dans App.vue

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'; //adjust according to the path to your component

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

Vous devriez maintenant pouvoir voir le composant HelloWorld rendu dans le composant App.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!