Krijimi i Komponentëve të Femijëve në Vue

Komponentët brenda kanë të njëjtën strukturë si komponenti kryesor, me të cilin kemi punuar më parë. Kjo do të thotë që në skedarin e çdo komponenti do të ketë tag-et script dhe template.

Le të bëjmë për shembull një komponent me emrin User. Le të vendosim kodin e tij në skedarin përkatës:

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

Në objektin data të komponentit mund të vendosni disa të dhëna:

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

Këto të dhëna mund të shfaqen në pamjen e komponentit:

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

Tani le ta lidhim komponentin e krijuar nga ne me komponentin kryesor. Për këtë, së pari le ta importojmë atë:

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

Le të shënojmë emrin e tij në konfigurimin components:

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

Në pamjen e komponentit prind mund të shfaqet pamja e komponentit të femijë. Për këtë duhet të shkruhet një tag, emri i të cilit korrespondon me emrin e komponentit. Le ta bëjmë këtë:

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