Crearea componentelor copil în Vue

Componentele în interior au aceeași structură ca și componenta principală, cu care am lucrat anterior. Adică în fișierul fiecărei componente vor fi tagurile script și template.

Să facem de exemplu o componentă cu numele User. Să plasăm codul ei în fișierul corespunzător:

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

În obiectul data al componentei se pot plasa niște date:

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

Aceste date pot fi afișate în reprezentarea componentei:

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

Să conectăm acum componenta creată de noi la componenta principală. Pentru aceasta mai întâi o importăm:

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

Să scriem numele ei în setarea components:

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

În reprezentarea componentei părinte se poate afișa reprezentarea componentei copil. Pentru aceasta trebuie să scrieți un tag, al cărui nume corespunde numele componentei. Să facem asta:

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