<template>
  <div class="micro-app">
    <el-button type="primary" @click="changeState">父按钮 改变传参</el-button>
    <div ref="child1"></div>
  </div>
</template>

<script>
import {initGlobalState, loadMicroApp} from 'qiankun';

export default {
  name: 'MicroApp',

  data() {
    return {
      messageEvent: initGlobalState({event: null}),
      microApp: null
    }
  },

  mounted() {
    this.microAppInit()
    this.messageInit()
  },
  methods: {
    microAppInit() {
      this.microApp = loadMicroApp({
        name: '子应用child01',
        container: this.$refs.child1,
        entry: 'http://localhost:8001',
        props: {
          test_param: {
            userid: 111,
            corpid: 222
          }
        }
      });
    },
    messageInit() {
      this.messageEvent.onGlobalStateChange((state, prev) => {
        console.log("main-onGlobalStateChange", state, prev);
      });
    },
    changeState() {
      this.messageEvent.setGlobalState({b: 1});
    }
  },
  beforeDestroy() {
    this.messageEvent.offGlobalStateChange()
    this.microApp.unmount();
  }
}
</script>

<style lang="scss" scoped>

</style>
