Стварэнне даччыных кампанентаў у 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>