Penciptaan Komponen Anak dalam Vue

Komponen di dalamnya mempunyai struktur yang sama seperti komponen utama, yang kami gunakan sebelum ini. Iaitu dalam fail setiap komponen akan terdapat tag script dan template.

Mari kita buat contoh komponen dengan nama User. Mari letakkan kodnya dalam fail yang sepadan:

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

Dalam objek data komponen, beberapa data boleh diletakkan:

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

Data ini boleh dipaparkan dalam templat komponen:

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

Sekarang mari sambungkan komponen yang kami buat ke komponen utama. Untuk melakukan ini, mula-mula import komponen tersebut:

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

Tetapkan namanya dalam tetapan components:

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

Dalam templat komponen induk, templat komponen anak boleh dipaparkan. Untuk melakukan ini, tulis tag yang namanya sepadan dengan nama komponen. Mari lakukan ini:

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