Vue'da Alt Bileşen Oluşturma

Bileşenlerin iç yapısı, daha önce çalıştığımız ana bileşenle aynıdır. Yani her bileşen dosyasında script ve template etiketleri bulunacaktır.

Örnek olarak User adında bir bileşen yapalım. Kodunu ilgili dosyaya yerleştirelim:

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

data nesnesine bazı veriler yerleştirilebilir:

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

Bu veriler bileşenin şablonunda gösterilebilir:

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

Şimdi oluşturduğumuz bu bileşeni ana bileşene bağlayalım. Bunun için öncelikle onu içe aktaralım:

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

components ayarında adını belirtelim:

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

Ana bileşenin şablonunda, alt bileşenin şablonu gösterilebilir. Bunun için, adı bileşenin adına karşılık gelen bir etiket yazmak gerekir. Bunu yapalım:

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