Criação de Componentes Filhos no Vue

Os componentes internamente têm a mesma estrutura que o componente principal com o qual trabalhamos anteriormente. Ou seja, no arquivo de cada componente haverá as tags script e template.

Vamos, por exemplo, criar um componente chamado User. Vamos colocar seu código no arquivo correspondente:

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

No objeto data do componente, você pode colocar alguns dados:

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

Esses dados podem ser exibidos no template do componente:

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

Agora, vamos conectar o componente criado por nós ao componente principal. Para isso, primeiro vamos importá-lo:

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

Vamos registrar seu nome na opção components:

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

No template do componente pai, é possível exibir o template do componente filho. Para isso, é necessário escrever uma tag cujo nome corresponda ao nome do componente. Vamos fazer isso:

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