1. Truyền dữ liệu giữa các trang thông qua tham số đường dẫn

Cách này lý tưởng khi dữ liệu cần truyền là các tham số đơn giản, nhưng không phù hợp khi dữ liệu phức tạp

Trang nguồn

Chỉ cần thêm tham số vào cuối đường dẫn khi chuyển trang

uni.navigateTo({
  	url: "/pages/OrderDetailInfo/index?id=123"
 });

Trang đích

Dữ liệu được nhận thông qua phương thức onLoad trong lifecycle của trang đích

Vue 2, Vue 3 (kiểu options)

export default {
	onLoad(option) { // option là object chứa các tham số từ trang nguồn
		console.log(option.id); // Hiển thị tham số nhận được
	}
}

Vue 3 (kiểu composition)

onLoad((option) => {
    console.log(option.id); // Hiển thị tham số nhận được
})

2. Truyền dữ liệu giữa các trang sử dụng EventChannel

Là phương thức được khuyến nghị sử dụng: các sự kiện chỉ tồn tại giữa trang nguồn và trang đích

Trang nguồn

uni.navigateTo({
  	url: "/pages/OrderDetailInfo/index",
    success: function (res) {
         res.eventChannel.emit("orderDetailOpened", orderData);
    }
 });

Trang đích

Vue 2, Vue 3 (kiểu options)

Trong Vue 2 và Vue 3, sử dụng hàm getOpenerEventChannel để nhận sự kiện

export default {
	onLoad(option) {
		const eventChannel = this.getOpenerEventChannel();
		eventChannel.on('orderDetailOpened', (data) => {
			console.log(data);
		});
	}
}

Vue 3 (kiểu composition)

Sử dụng hàm getCurrentPages để lấy trang hiện tại, sau đó truy cập thông qua $vm

onLoad((options) => {
    const currentPage = getCurrentPages().pop();
    currentPage.$vm.getOpenerEventChannel().on("orderDetailOpened", (data) => {
        orderDetail.value = data;
    });
});

3. Truyền dữ liệu giữa các trang sử dụng phương thức toàn cầu uni.$emit, uni.$on, uni.$once, uni.$off

Cách này không chỉ dùng cho giao tiếp giữa các trang mà còn có thể dùng cho các thành phần khác nhau trong ứng dụng Ưu điểm:

1. Có thể gửi sự kiện từ bất kỳ đâu mà không cần phụ thuộc vào cấu trúc trang Nhược điểm:
2. tên sự kiện phải duy nhất để tránh xung đột
3. Phải hủy sự kiện khi không cần nữa để tránh việc监听 gây tốn bộ nhớ và lỗi logic

Trang nguồn

Gửi dữ liệu đến trang đích

uni.$emit('productDetailReceived', productData);

Trang đích

Nhận dữ liệu từ trang nguồn

// Đăng ký nhận sự kiện
uni.$on('productDetailReceived', (data) => {
    console.log(data);
});

// Nhận sự kiện một lần
uni.$once('productDetailReceived', (data) => {
    console.log(data);
});

// Hủy đăng ký nhận sự kiện
uni.$off('productDetailReceived', () => {
    // Thực hiện các thao tác sau khi hủy
});