Vue-də uşaq komponentlərin yaradılması

Komponentlərin daxili quruluşu, daha əvvəl işlədiyimiz əsas komponentlə eyni quruluşa malikdir. Yəni hər bir komponentin faylında script və template teqləri olacaq.

Nümunə üçün gəlin User adlı bir komponent edək. Onun kodunu uyğun faylda yerləşdirək:

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

data obyektində bəzi məlumatları yerləşdirmək olar:

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

Bu məlumatları komponentin təsvirində göstərmək olar:

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

İndi gəlin yaratdığımız komponenti əsas komponentə qoşaq. Bunun üçün əvvəlcə onu import edək:

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

Onun adını components konfiqurasiyasında yazaq:

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

Ana komponentin təsvirində uşaq komponentinin təsvirini göstərmək olar. Bunun üçün komponentin adına uyğun gələn teq yazmaq lazımdır. Gəlin bunu edək:

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