Создание дочерних компонентов в Vue

Компоненты внутри имеют такую же структуру, как и основной компонент, с которым мы работали ранее. To есть в файле каждого компонента будут теги script и template.

Давайте для примера сделаем компонент с названием User. Разместим его код в соответствующем файле:

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

В объекте data компонента можно разместить какие-то данные:

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

Эти данные можно вывести в представлении компонента:

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

Давайте теперь подключим созданный нами компонент к основному компоненту. Для этого для начала импортируем его:

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

Пропишем его имя в настройке components:

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

В представлении родительского компонента можно вывести представление дочернего компонента. Для этого нужно написать тег, имя которого соответствует имени компонента. Давайте сделаем это:

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