Components trong Vue.js: Tạo, tái sử dụng và truyền dữ liệu

Components là một khái niệm quan trọng trong Vue.js, cho phép bạn xây dựng ứng dụng web một cách có cấu trúc và dễ bảo trì. Với Components, bạn có thể tách ứng dụng thành các phần nhỏ độc lập, mỗi phần chịu trách nhiệm cho một phần cụ thể của giao diện người dùng.

Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo ra các Components trong Vue.js, sử dụng chúng để tái sử dụng code và truyền dữ liệu giữa các Components. Chúng ta sẽ khám phá cách sử dụng Props để truyền dữ liệu từ Component cha sang Component con, và cách sử dụng Events để truyền dữ liệu từ Component con lên Component cha.

1.Tạo Components

Components trong Vue.js có thể được tạo bằng cách sử dụng phương thức Vue.component hoặc bằng cách định nghĩa single-file components.

 Ví dụ:

// 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. Cấu trúc Components

Một Component Vue bao gồm một template, một script và các style tùy chọn. Template chứa các đoạn mã HTML, script chứa các tùy chọn của Component (dữ liệu, phương thức, tính toán thuộc tính, lifecycle hooks) và styles xác định giao diện của Component.

 Ví dụ: 

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Tăng</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Xin chào, Vue!',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<style scoped>
/* Các styles của Component */
</style>

3. Tái sử dụng Components

Components trong Vue.js có thể được tái sử dụng trong toàn bộ ứng dụng, giảm sự trùng lặp mã và cải thiện khả năng bảo trì. Chúng thúc đẩy một phương pháp modul, cho phép bạn kết hợp các Components nhỏ thành các Components lớn hơn.

 Ví dụ:
 

// 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 cho phép bạn truyền dữ liệu từ Components cha sang Components con. Props được khai báo trong Components con và có thể được sử dụng như các thuộc tính dữ liệu thông thường.

 Ví dụ:

// 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: 'Xin chào từ cha!'
    };
  }
};
</script>

// ChildComponent.vue
<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

5. Sự kiện tuỳ chỉnh

Components có thể phát ra các sự kiện tuỳ chỉnh để giao tiếp với Components cha. Components cha có thể lắng nghe các sự kiện này và phản ứng tương ứng.

Ví dụ:

// ChildComponent.vue
<template>
  <div>
    <button @click="increment">Tăng</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>Đếm: {{ count }}</p>
  </div>
</template>

Những ví dụ này giới thiệu các khái niệm chính của các thành phần Vue.js, thể hiện tính linh hoạt, khả năng tái sử dụng và khả năng giao tiếp của chúng. Các thành phần giúp tạo mã modular và có thể bảo trì, làm cho Vue.js trở thành một khung mạnh mẽ để xây dựng các ứng dụng có thể mở rộng.