Креирање доњих компоненти у 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>