页面传参与返回值

2018-11-30 06:53:33

适用场景

在前端开发中,经常有A页面打开B页面的场景。如果想从A页面传参数给B页面,可以直接通过URL传递。但如果想从B页面返回数据给A页面,操作逻辑就会复杂一些

Cabloy提供了一种页面交互机制,使得页面之间传参返回值都非常便捷、自然

A页面

A页面通过方法$view.navigate打开B页面

this.$view.navigate('/test/todo/test/select', {
  target: '_self',
  context: {
    params: {
      message: 'hello world',
      markCount: 2,
    },
    callback: (code, data) => {
      // data returned
      if (code === 200) {
        console.log(data); 
      }
      // B页面关闭(有数据返回)
      if (code === null) {
      } 
      // B页面关闭(无数据返回)
      if (code === false) {
      } 
    },
  },
});
名称 说明
target 页面打开方式
context 环境参数
context.params 页面参数
context.callback 页面回调函数

context.callback会被调用两次:

  1. B页面通过callback返回数据,code===200
  2. 当B页面关闭时再调用callback一次,如果已经返回数据A页面code===null,否则code===false

B页面

<template>
  <eb-page>
    ...
  </eb-page>
</template>
<script>
import Vue from 'vue';
const ebPageContext = Vue.prototype.$meta.module.get('a-components').options.components.ebPageContext;
export default {
  mixins: [ ebPageContext ],
  computed: {
    message() {
      return this.contextParams.message;
    },
    markCount() {
      return this.contextParams.markCount;
    },
  },
  methods: {
    onDone() {
      const res = `${this.message}${new Array(this.markCount + 1).join('!')}`;
      this.contextCallback(200, res);
      this.$f7router.back();
    },
  },
};
</script>

ebPageContext

B页面组件需要mixin组件ebPageContext,从而可以获取参数,并调用callback返回数据

获取参数

this.contextParams包含所有A页面传递的参数,可以通过组件的computedthis.contextParams获取参数

返回值

通过this.contextCallback返回值

关闭页面

通过this.$f7router.back关闭B页面,从而返回到A页面



评论: