适用场景

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

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

A页面

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

src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/page/openReturn.vue

onPerformOpen() {
  return new Promise((resolve, reject) => {
    this.$view.navigate('/test/party/kitchen-sink/page/pageReturn', {
      context: {
        params: {
          value: this.value,
        },
        callback: (code, data) => {
          if (code === 200) {
            this.value = data.value;
            resolve();
          }
          // B页面关闭（无数据返回）
          if (code === false) {
            reject();
          }
          // B页面关闭（有数据返回）
          if (code === null) {
            // do nothing
          }
        },
      },
    });
  });
},
名称 说明
context 环境对象
context.params 页面传入参数
context.callback 页面回调函数

context.callback会被调用两次：

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

B页面

src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/page/pageReturn.vue

<script>
import Vue from 'vue';
const ebPageContext = Vue.prototype.$meta.module.get('a-components').options.components.ebPageContext;
export default {
  mixins: [ebPageContext],
  data() {
    return {};
  },
  computed: {
    value() {
      return this.contextParams.value;
    },
  },
  methods: {
    onPerformDone() {
      const valueNew = this.value + 1;
      this.contextCallback(200, { value: valueNew });
      this.$f7router.back();
    },
  },
};

</script>

ebPageContext

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

获取参数

this.contextParams包含A页面的传入参数

返回值

通过this.contextCallback向A页面返回值

关闭B页面

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