Làm sao đứng tại 1 trang nhận được giá trị đã chọn từ các Component bên trong trang đó?

Mình có 1 trang có nhiều component, và mỗi component giữ 1 lượng data nhất định mà người dùng đã cung cấp.

Làm sao để trang có thể thu các dữ liệu này để tổng hợp lại nhỉ?

Hi anh @Tuan_Ngo

Có 2 cách để anh làm việc tổng hợp các data lại nhé:

  1. Anh để 1 global data trong app, và mỗi lần anh update lại data trong component/page thì anh set lại data cho global luôn. Chi tiết cách dùng data của global anh có thể xem tại đây: getApp method | Tini App
  2. Anh có thể để data bên trong pages, và các component chỉ nhận props từ page truyền xuống thôi, mỗi lần component có hành động thay đổi data thì anh sẽ gọi 1 hàm từ trên page truyền xuống để đổi data cho page. Như vậy mỗi lần page cập nhật data thì component cũng sẽ thay đổi theo giá trị của props.

Anh đang làm cách 1, nhưng chưa biết làm sao để rerender lại trang để lấy dữ liệu mới cho trang khi component thay đổi dữ liêu.

Để render lại trang thì có 2 trường hợp:

  • Component thay đổi data/props thì chính component đó sẽ được render lại
  • Page thay đổi data, thì page sẽ được render lại

Như vậy trong component của anh khi thay đổi data để trigger page render/thực hiện logic gì đó thì anh cần phải gọi 1 hàm từ page truyền vào component.

Em ví dụ:

— Page:

page/index.js

Page({
  onComponentChange(data) {
    // Do something here....
  }
})

page/index.txml

<component onComponentChange="onComponentChange" />

— Component:

component/index.js

Component({
  methods: {
    callPageFunction() {
       this.props.onComponentChange();
    }
  }
})

component/index.txml

<button onTap="callPageFunction">Tap to call page function</button>
1 Like

Hướng đó cũng được.

Còn hướng dùng: getCurrentPages và setData lại cho trang đang hiển thị để re-render có được không?

Vẫn được anh nhé, trong trường hợp anh biết chính xác page nào

Anh đã code thử nhưng cả 2 cách đều không load lại page (dù đã setData ở Page rồi). Các component không reload lại và vẫn giữ nguyên tình trạng hiện tại.

Anh có thể cho em xem thử code của anh được không ạ?

1 Like

Anh tìm ra hướng xử lý được rồi. Thank em!

1 Like

Hi anh, anh có thể chia sẻ cách xử lí của anh được không ạ? hiện tại em cũng gặp vấn đề UI ko render lại khi gọi setData,

Em làm theo nguyên tắc này:

  1. Page sẽ xử lý các login và set lại data cho các Component.
  2. Component nhận dữ liệu người dùng nhập vào và chuyển về Page xử lý.
  3. Page xử lý xong thì set lại data cho các Component.
  4. Framework sẽ tự động render lại Component khi có data của nó thay đổi.

Như vậy, Page sẽ giữ hết data của các component khi có bất kì thay đổi nào.

1 Like