Création de composants enfants dans Vue

Les composants ont en interne la même structure que le composant principal avec lequel nous travaillions auparavant. C'est-à-dire que dans le fichier de chaque composant, il y aura les balises script et template.

Prenons par exemple pour créer un composant nommé User. Plaçons son code dans le fichier correspondant :

components/User.vue<script>
  export default {
    data() {
      return {
        
      }
    }
  }
</script>

Dans l'objet data du composant, on peut placer certaines données :

components/User.vue<script>
  export default {
    data() {
      return {
        name: 'john'
      }
    }
  }
</script>

Ces données peuvent être affichées dans la vue du composant :

components/User.vue<template>
  {{ name }}
</template>

Maintenant, connectons le composant créé par nous au composant principal. Pour cela, commençons par l'importer :

App.vue<script>
  import User from './components/User.vue'
  
  export default {
    
  }
</script>

Inscrivons son nom dans l'option components :

App.vue<script>
  import User from './components/User.vue'
  
  export default {
    components: {
      User
    }
  }
</script>

Dans la vue du composant parent, on peut afficher la vue du composant enfant. Pour cela, il faut écrire une balise dont le nom correspond au nom du composant. Faisons cela :

App.vue<template>
  <User />
</template>