Creazione di Componenti Figli in Vue

I componenti internamente hanno la stessa struttura del componente principale con cui abbiamo lavorato in precedenza. Cioè in ogni file componente ci saranno i tag script e template.

Facciamo un esempio creando un componente chiamato User. Posizioniamo il suo codice nel relativo file:

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

Nell'oggetto data del componente si possono posizionare alcuni dati:

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

Questi dati possono essere visualizzati nella vista del componente:

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

Ora colleghiamo il componente creato da noi al componente principale. Per prima cosa importiamolo:

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

Inseriamo il suo nome nell'impostazione components:

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

Nella vista del componente genitore si può visualizzare la vista del componente figlio. Per fare questo bisogna scrivere un tag, il cui nome corrisponde al nome del componente. Facciamolo:

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