close

Components di Vue.js: Membuat, Menggunakan Kembali, dan Melewatkan Data

Components adalah konsep penting dalam Vue.js yang memungkinkan Anda membangun aplikasi web yang terstruktur dan dapat dipelihara. Dengan components, Anda dapat memecah aplikasi Anda menjadi bagian-bagian kecil mandiri, masing-masing bertanggung jawab atas bagian tertentu dari antarmuka pengguna.

Pada artikel ini, kita akan mengeksplorasi cara membuat components di Vue.js, menggunakannya untuk menggunakan kembali kode, dan meneruskan data antara components. Kita akan mendalami penggunaan props untuk meneruskan data dari komponen induk ke komponen anak, dan menggunakan peristiwa untuk meneruskan data dari cadangan komponen anak ke komponen induknya.

 

1. Membuat Components

Components di Vue.js dapat dibuat menggunakan metode `Vue.component` atau dengan mendefinisikan single-file components. 

 Contoh:  

// Global Component using Vue.component  
Vue.component('my-component', {  
  // Component options  
});  
  
// Local Component using single-file component  
// MyComponent.vue  
<template>  
  <!-- Component template -->  
</template>  
  
<script>  
export default {  
  // Component options  
};  
</script>

 

2. Struktur Komponen

Komponen Vue terdiri dari template, skrip, dan gaya opsional. Templat berisi markup HTML, skrip berisi opsi komponen(data, metode, properti terkomputasi, kait siklus hidup), dan gaya menentukan tampilan komponen.

Contoh:

<template>  
  <div>  
    <h1>{{ message }}</h1>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello, Vue!',  
      count: 0  
    };  
  },  
  methods: {  
    increment() {  
      this.count++;  
    }  
  }  
};  
</script>  
  
<style scoped>  
/* Component styles */  
</style>

 

3. Dapat Digunakan Kembali Komponen

Components di Vue.js dapat digunakan kembali di seluruh aplikasi Anda, mengurangi duplikasi kode dan meningkatkan kemudahan pemeliharaan. Mereka mempromosikan pendekatan modular, memungkinkan Anda menyusun yang lebih kecil components menjadi yang lebih besar.

Contoh:

// ParentComponent.vue  
<template>  
  <div>  
    <child-component></child-component>  
    <child-component></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  }  
};  
</script>

 

4. Props

Props memungkinkan Anda untuk meneruskan data dari orang tua components ke anak components. Props dideklarasikan dalam komponen anak dan dapat digunakan seperti properti data biasa.

Contoh:

// ParentComponent.vue  
<template>  
  <div>  
    <child-component:message="parentMessage"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from parent!'  
    };  
  }  
};  
</script>  
  
// ChildComponent.vue  
<template>  
  <div>  
    <h2>{{ message }}</h2>  
  </div>  
</template>  
  
<script>  
export default {  
  props: ['message']  
};  
</script>

 

5. Acara Kustom

Components dapat memancarkan acara khusus untuk berkomunikasi dengan induknya components. Orang tua components dapat mendengarkan acara ini dan bereaksi sesuai.

Contoh:

// ChildComponent.vue  
<template>  
  <div>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    increment() {  
      this.$emit('increment-event');  
    }  
  }  
};  
</script>  
  
// ParentComponent.vue  
<template>  
  <div>  
    <child-component @increment-event="handleIncrement"></child-component>  
    <p>Count: {{ count }}</p>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      count: 0  
    };  
  },  
  methods: {  
    handleIncrement() {  
      this.count++;  
    }  
  }  
};  
</script>

 

Contoh-contoh ini menampilkan konsep utama Vue.js components, yang menunjukkan fleksibilitas, kegunaan ulang, dan kemampuan komunikasinya. Components membantu membuat kode modular dan dapat dipelihara, menjadikan Vue.js kerangka kerja yang kuat untuk membangun aplikasi yang dapat diskalakan.