Vue Component Extensions

Sau khi Vue mounts và khởi tạo thành công ZMP, có thể truy xuất ZMP instance, zmp-vue package cung cấp một số properties hữu ích.

zmpready

Một callback function sẽ được thực thi sau khi ZMP được khởi tạo thành công. Sử dụng khi cần gọi các ZMP API với 1 đối số chứa ZMP instance đã khởi tạo. Ví dụ:

Code demo fallback when rendering server side!

zmp

ZMP Instance cho phép sử dụng các ZMP APIs.

Khi import và sử dụng instance cần chắc chắn rằng tại thời điểm đó ZMP instance đã được khởi tạo xong:

import { zmp } from "zmp-vue";

export default () => {
  const doSomething = () => {
    zmp.dialog.alert("Hello world");
  };

  // ...
};

theme

Object cung cấp thông tin xem theme hiện tại đang dùng: theme.ios, theme.md, theme.aurora.

import { theme } from "zmp-vue";

export default () => {
  if (theme.ios) {
    console.log("Currently active theme is iOS-theme");
  }

  // ...
};

zmproute và zmprouter

Router instance và route hiện tại được truyền thông qua props tới router components:

Các properties này chỉ được truyền khi component đựợc load với router (vd: Page, routable modals, routable tabs). Nếu muốn truy xuất tại child components, thì cần truyền xuống thông qua props từ parent component.

// nhận thông qua props
export default ({ zmproute, zmprouter }) => {
  useEffect(() => {
    console.log(zmproute.url);
  }, []);
  const navigate = () => {
    zmprouter.navigate("/some-page/");
  };
  // ...
};

zmproute là route hiện tại, object chứa các properties sau:

• url - route URL
• path - route path
• query - object chứaa route query params. Ví dụ /page/?id=5&foo=bar zmproute.query sẽ thể hiện {id: '5', foo: 'bar'}
• params - route params. Ví dụ: khai báo route /page/user/:userId/post/:postId/ path và url là /page/user/55/post/12/ thì zmproute.params sẽ thể hiện {userId: '55', postId: '12'}
• name - tên của route
• hash - route URL hash
• route - route object

zmprouter là router instance

Events

Các components trong Vue hỗ trợ xử lý events kiểu emit (thay vì props như React). Để handle các event, ta dùng directive v-on:[event] hoặc @[event], ví dụ:

Đối với component <zmp-page/> hỗ trợ page:init, page:beforein,.. events, để xử lý các events:

Code demo fallback when rendering server side!