Xử lý Custom Events trong VueJS 2

Custom Events trong VueJS 2 nổi lên với vai trò quan trọng. Custom Events cung cấp một cách thức linh hoạt để giao tiếp giữa các thành phần khác nhau, cho phép truyền dữ liệu và kích hoạt hành động từ một component đến component khác một cách dễ dàng và linh hoạt.

Trong bài viết này, mình sẽ đi sâu vào Custom Events trong VueJS 2 để hiểu rõ hơn về khái niệm này, cách sử dụng, và tầm quan trọng của nó trong việc xây dựng các ứng dụng linh hoạt và tương tác trong VueJS 2. Mình sẽ tìm hiểu cách sử dụng Custom Events để truyền dữ liệu, kích hoạt hành động giữa các component, cũng như các trường hợp thực tế và best practices khi áp dụng Custom Events trong phát triển ứng dụng VueJS 2.

Hãy cùng nhau tìm hiểu cách Custom Events làm thay đổi cách mình tương tác và xây dựng ứng dụng trong VueJS 2!

Custom Events trong VueJS 2 là gì?

Custom Events là cơ chế cho phép các component tương tác và giao tiếp với nhau thông qua việc phát ra và lắng nghe các sự kiện tùy chỉnh mà mình tự định nghĩa.

Bài viết này được đăng tại [free tuts .net]

Cụ thể, Custom Events cho phép một component gửi đi thông báo về một sự kiện cụ thể và các components khác có thể lắng nghe và phản ứng khi sự kiện đó xảy ra. Điều này tạo ra một cách linh hoạt và mạnh mẽ để truyền dữ liệu, thông tin hoặc kích hoạt các hành động từ một component đến các component khác mà không cần phải phụ thuộc hoặc biết rõ về nhau.

Ví dụ, một component cha có thể lắng nghe sự kiện từ component con để cập nhật dữ liệu, hoặc một component con có thể phát ra một sự kiện khi người dùng thực hiện một hành động cụ thể để thông báo cho component khác biết về hành động đó.

Custom Events là một phần quan trọng của cách VueJS 2 quản lý tương tác giữa các component, giúp tạo ra ứng dụng linh hoạt và dễ bảo trì. Điều này cho phép bạn xây dựng ứng dụng có khả năng mở rộng cao và tái sử dụng thành phần một cách hiệu quả.

Tại sao Custom Events quan trọng trong phát triển VueJS 2?

Custom Events đóng vai trò quan trọng trong phát triển VueJS 2 vì nó mở ra cách tiếp cận linh hoạt và mạnh mẽ để tương tác giữa các component, cung cấp các lợi ích quan trọng sau:

Tương tác giữa các Component:

• Phát và lắng nghe sự kiện: Cho phép các component gửi thông điệp và lắng nghe các sự kiện tùy chỉnh, giúp chúng tương tác một cách linh hoạt.

Tách biệt Component:

• Tính độc lập và tái sử dụng: Giúp các component tự động hóa việc xử lý sự kiện và dữ liệu mà không cần phụ thuộc quá nhiều vào nhau, tạo ra tính độc lập và tái sử dụng tốt hơn.

Quản lý trạng thái tốt hơn:

• Quản lý dữ liệu: Cho phép truyền dữ liệu giữa các component, giúp cập nhật trạng thái ứng dụng một cách nhất quán.

Mở rộng ứng dụng:

• Mở rộng và bảo trì dễ dàng: Tạo điều kiện thuận lợi cho việc mở rộng ứng dụng mà không làm mất tính nhất quán hoặc sự dễ bảo trì.

Hiệu suất và tối ưu hóa:

• Tối ưu hiệu suất: Custom Events giúp hạn chế việc phải cập nhật lại toàn bộ ứng dụng mỗi khi có thay đổi, giúp cải thiện hiệu suất của ứng dụng.

Custom Events không chỉ giúp các component giao tiếp một cách dễ dàng mà còn tạo ra sự linh hoạt và sự độc lập giữa chúng, từ đó tạo nên sự tổ chức và mở rộng ứng dụng một cách hiệu quả trong quá trình phát triển VueJS 2.

Cơ Bản về Custom Events trong VueJS 2

Trong VueJS 2, Custom Events là cơ chế cho phép các component tương tác thông qua việc phát và lắng nghe các sự kiện tùy chỉnh mà mình tự định nghĩa. Cụ thể, nó cho phép một component gửi đi thông báo về một sự kiện cụ thể và các component khác có thể lắng nghe và phản ứng khi sự kiện đó xảy ra.

Sự cần thiết của Custom Events trong ứng dụng VueJS 2

Custom Events rất quan trọng vì chúng cho phép các component tương tác một cách linh hoạt và độc lập. Khi một component cần gửi thông điệp hoặc dữ liệu đến component khác, Custom Events là công cụ linh hoạt để thực hiện điều đó mà không cần phải phụ thuộc hoặc biết rõ về nhau.

Cú pháp của Custom Events trong VueJS 2

Cú pháp:

Trong VueJS, mình sử dụng $emit để phát ra một sự kiện từ một component con và v-on để lắng nghe sự kiện đó từ một component cha.

Ví dụ Code:

Ở đây là một ví dụ đơn giản về việc sử dụng Custom Events trong VueJS 2:

<!-- Component Con: ChildComponent.vue -->
<template>
  <button @click="sendMessage">Gửi Tin Nhắn</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Xin chào từ con'); // Phát ra sự kiện với dữ liệu
    }
  }
}
</script>

<!-- Component Cha: ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @message-sent="handleMessage"></ChildComponent> <!-- Lắng nghe sự kiện -->
    <p>{{ receivedMessage }}</p> <!-- Hiển thị dữ liệu nhận được -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedMessage: ''
    };
  },
  methods: {
    handleMessage(message) {
      this.receivedMessage = message; // Xử lý dữ liệu nhận được từ sự kiện
    }
  }
}
</script>

main.js

import Vue from 'vue';
import ParentComponent from './ParentComponent.vue';

new Vue({
  el: '#app',
  render: h => h(ParentComponent)
});

Trong ví dụ trên, ChildComponent phát ra sự kiện 'message-sent' khi nút được nhấn và truyền thông điệp 'Xin chào từ con'. ParentComponent lắng nghe sự kiện này và xử lý dữ liệu nhận được từ sự kiện để hiển thị trên giao diện.

Truyền dữ liệu qua Custom Events trong VueJS 2

Truyền dữ liệu từ Child Component lên Parent Component

Sử dụng $emit để phát ra sự kiện từ Child Component

Trong VueJS, $emit được sử dụng để phát ra sự kiện từ một component con lên component cha.

Bắt và xử lý sự kiện trong Parent Component

Cú pháp v-on được sử dụng để lắng nghe sự kiện được phát ra từ component con.

Ví dụ Code:

<!-- ChildComponent.vue -->
<template>
  <button @click="sendDataToParent">Gửi Dữ Liệu Lên Cha</button>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('send-data', 'Dữ liệu từ con lên cha');
    }
  }
}
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @send-data="receiveDataFromChild"></ChildComponent>
    <p>{{ receivedData }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedData: ''
    };
  },
  methods: {
    receiveDataFromChild(data) {
      this.receivedData = data;
    }
  }
}
</script>

Để chạy được code này, bạn cần một file main.js để khởi tạo ứng dụng Vue:

main.js

import Vue from 'vue';
import ParentComponent from './ParentComponent.vue';

new Vue({
  el: '#app',
  render: h => h(ParentComponent)
});

Ở đây, khi nút trong ChildComponent được nhấn, sự kiện 'send-data' được phát ra cùng với dữ liệu 'Dữ liệu từ con lên cha'. Trong ParentComponent, sự kiện này được bắt và phương thức receiveDataFromChild được gọi để xử lý dữ liệu nhận được từ component con và hiển thị lên giao diện.

Truyền dữ liệu từ Parent Component xuống Child Component

Truyền dữ liệu xuống thông qua Props

Trong VueJS, props được sử dụng để truyền dữ liệu từ component cha xuống component con.

Xử lý sự kiện từ Parent Component trong Child Component

Component con có thể nhận dữ liệu và xử lý sự kiện từ component cha thông qua props.

Ví dụ Code:

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :data-from-parent="dataToSend"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dataToSend: 'Dữ liệu từ cha xuống con'
    };
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ dataFromParent }}</p>
  </div>
</template>

<script>
export default {
  props: {
    dataFromParent: String
  }
}
</script>

Trong ví dụ trên, ParentComponent truyền dữ liệu xuống ChildComponent thông qua props có tên là data-from-parent. Trong ChildComponent, props dataFromParent được khai báo để nhận dữ liệu từ component cha và hiển thị nó trên giao diện.

Custom Events và Bus Event trong VueJS 2

Sử dụng Bus Event để truyền dữ liệu giữa các Component không có mối quan hệ Cha-Con

Trong trường hợp các component không có mối quan hệ cha-con, việc sử dụng Bus Event (còn được gọi là Event Bus) là một cách để truyền dữ liệu hoặc thông báo giữa chúng.

Khởi tạo Event Bus:

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

Sử dụng Event Bus để gửi và nhận dữ liệu

Gửi dữ liệu từ Component A:

// ComponentA.vue
import { EventBus } from './event-bus.js';

export default {
  methods: {
    sendDataToOtherComponent() {
      EventBus.$emit('data-sent', 'Dữ liệu từ Component A');
    }
  }
}

Nhận dữ liệu từ Component B:

// ComponentB.vue
import { EventBus } from './event-bus.js';

export default {
  created() {
    EventBus.$on('data-sent', (data) => {
      console.log('Nhận dữ liệu từ Event Bus:', data);
    });
  }
}

Trong ví dụ trên, EventBus được tạo để đóng vai trò như một cơ chế trung gian giữa các component không có mối quan hệ trực tiếp. ComponentA sử dụng EventBus để phát ra sự kiện 'data-sent' với dữ liệu được truyền đi. Trong khi đó, ComponentB lắng nghe sự kiện này thông qua EventBus và xử lý dữ liệu khi sự kiện được phát ra từ ComponentA.

Lưu ý khi sử dụng Bus Event

• Rủi ro về tính độc lập: Sử dụng Bus Event có thể làm giảm tính độc lập của các component, làm cho mã nguồn khó bảo trì khi dự án lớn.

• Tránh lạm dụng: Sử dụng Bus Event chỉ khi thực sự cần thiết, tránh lạm dụng để giữ cho cấu trúc ứng dụng rõ ràng và dễ hiểu.

• Phân biệt rõ ràng: Đặt tên sự kiện một cách rõ ràng và chuẩn mực để tránh xung đột và hiểu rõ mục đích của sự kiện.

• Tính tương thích và kiểm thử: Đảm bảo các component hoạt động đúng đắn khi truyền thông qua Bus Event, đặc biệt là trong các tình huống phức tạp.

Sử dụng Bus Event có thể làm cho ứng dụng linh hoạt hơn trong một số trường hợp cụ thể, nhưng cần phải được sử dụng một cách cẩn trọng để tránh những vấn đề về quản lý trạng thái và bảo trì mã nguồn.

Sử dụng Custom Events trong thực tế bằng VueJS 2

Sử dụng Custom Events để tương tác các Component thông qua Custom Events

Trong một ứng dụng VueJS, có thể sử dụng Custom Events để tương tác giữa các component khác nhau một cách linh hoạt và hiệu quả. Ví dụ dưới đây minh họa cách tương tác giữa một danh sách sản phẩm và một giỏ hàng:

EventBus.js

Tạo một file EventBus.js để tạo một đối tượng bus sự kiện:

import Vue from 'vue';
export const EventBus = new Vue();

Component danh sách sản phẩm:

<template>
  <div>
    <h2>Product List</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }}
        <button @click="addToCart(product)">Add to Cart</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { EventBus } from './EventBus.js';

export default {
  data() {
    return {
      products: [
        { id: 1, name: 'Product 1' },
        { id: 2, name: 'Product 2' },
        // ... more products
      ]
    };
  },
  methods: {
    addToCart(product) {
      EventBus.$emit('add-to-cart', product);
    }
  }
}
</script>

Component giỏ hàng:

<template>
  <div>
    <h2>Shopping Cart</h2>
    <ul>
      <li v-for="item in cart" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { EventBus } from './EventBus.js';

export default {
  data() {
    return {
      cart: []
    };
  },
  mounted() {
    EventBus.$on('add-to-cart', this.addToCart);
  },
  beforeDestroy() {
    EventBus.$off('add-to-cart', this.addToCart);
  },
  methods: {
    addToCart(product) {
      this.cart.push(product);
    }
  }
}
</script>

main.js

import Vue from "vue";
import ProductList from "./ProductList.vue";
import ShoppingCart from "./ShoppingCart.vue";
import { EventBus } from "./EventBus.js";

new Vue({
  el: "#app",
  components: {
    ProductList,
    ShoppingCart,
  },
  data() {
    return {
      cart: [], // Dữ liệu giỏ hàng có thể được quản lý ở đây nếu muốn chia sẻ giữa các component
    };
  },
  methods: {
    addToCart(product) {
      this.cart.push(product);
    },
  },
  mounted() {
    EventBus.$on("add-to-cart", this.addToCart);
  },
  beforeDestroy() {
    EventBus.$off("add-to-cart", this.addToCart);
  },
  template: `
    <div>
      <ProductList></ProductList>
      <ShoppingCart></ShoppingCart>
    </div>
  `,
});

Ở đây, khi người dùng nhấn nút "Add to Cart" trong ProductList, sự kiện 'add-to-cart' được phát ra cùng với thông tin về sản phẩm. Trong ShoppingCart, sự kiện này được lắng nghe và xử lý thông tin để thêm sản phẩm vào giỏ hàng.

Tối ưu và Best Practices khi sử dụng Custom Events

Các Best Practices:

• Phân chia tác vụ rõ ràng: Đảm bảo mỗi component chỉ tập trung vào một nhiệm vụ cụ thể để dễ dàng bảo trì và tái sử dụng.

• Truyền dữ liệu thông qua Props: Truyền dữ liệu giữa các component nên được thực hiện qua props nếu có thể, đặc biệt là giữa component cha và con.

• Sử dụng Bus Event một cách cẩn thận: Bus Event nên được sử dụng khi không có cách nào khác để tương tác giữa các component, nhưng cần phải cẩn trọng để tránh làm mất tính linh hoạt và rõ ràng của ứng dụng.

• Đặt tên sự kiện rõ ràng: Đặt tên sự kiện sao cho rõ ràng, mô tả đúng mục đích của sự kiện đó để dễ dàng hiểu và bảo trì.

• Kiểm thử và xử lý các tình huống đặc biệt: Đảm bảo các tình huống đặc biệt hoặc trường hợp không mong đợi khi sử dụng Custom Events được xử lý một cách chính xác.

Sử dụng Custom Events trong VueJS nên tuân thủ các nguyên tắc cơ bản để đảm bảo tính linh hoạt và dễ bảo trì của mã nguồn. Áp dụng các best practices giúp cải thiện cấu trúc của ứng dụng và tăng khả năng mở rộng của nó trong tương lai.

Kết bài

Custom Events đóng vai trò quan trọng trong phát triển ứng dụng VueJS 2, chúng cung cấp cơ chế linh hoạt để tương tác giữa các component và quản lý trạng thái ứng dụng một cách hiệu quả. Việc hiểu và sử dụng Custom Events đúng cách không chỉ tạo ra ứng dụng linh hoạt mà còn giúp tối ưu hiệu suất và bảo trì mã nguồn một cách dễ dàng.