Създаване на дъщерни компоненти във Vue

Компонентите вътрешно имат същата структура като основния компонент, с който работихме преди. Това означава, че във файла на всеки компонент ще има тагове 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>