# micro-app微前端应用（vue方式实现）

**Repository Path**: wwruning/micro-app-vueDemo

## Basic Information

- **Project Name**: micro-app微前端应用（vue方式实现）
- **Description**: micro-app微前端应用（vue方式实现
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-28
- **Last Updated**: 2022-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


### 官网 https://zeroing.jd.com/micro-app/

### 通信
##### 基座应用向子应用发送数据
 方式1: 通过data属性发送数据
```
<template>
  <micro-app
    name='my-app'
    url='xx'
    :data='dataForChild' // data只接受对象类型，数据变化时会重新发送
  />
</template>

<script>
export default {
  data () {
    return {
      dataForChild: {type: '发送给子应用的数据'}
    }
  }
}
</script>


```
 方式2: 手动发送数据
###### 手动发送数据需要通过name指定接受数据的子应用，此值和<micro-app>元素中的name一致。
```
import microApp from '@micro-zoe/micro-app'

// 发送数据给子应用 my-app，setData第二个参数只接受对象类型
microApp.setData('my-app', {type: '新的数据'})

```

#### 子应用获取基座数据
 micro-app会向子应用注入名称为microApp的全局对象，子应用通过这个对象和基座应用进行数据交互。

##### 有两种方式获取来自基座应用的数据：
方式1：直接获取数据
```
const data = window.microApp.getData() // 返回基座下发的data数据

```

方式2：绑定监听函数
```
function dataListener (data) {
  console.log('来自基座应用的数据', data)
}

/**
 * 绑定监听函数，监听函数只有在数据变化时才会触发
 * dataListener: 绑定函数
 * autoTrigger: 在初次绑定监听函数时如果有缓存数据，是否需要主动触发一次，默认为false
 * !!!重要说明: 因为子应用是异步渲染的，而基座发送数据是同步的，
 * 如果在子应用渲染结束前基座应用发送数据，则在绑定监听函数前数据已经发送，在初始化后不会触发绑定函数，
 * 但这个数据会放入缓存中，此时可以设置autoTrigger为true主动触发一次监听函数来获取数据。
 */
window.microApp.addDataListener(dataListener: Function, autoTrigger?: boolean)

// 解绑监听函数
window.microApp.removeDataListener(dataListener: Function)

// 清空当前子应用的所有绑定函数(全局数据函数除外)
window.microApp.clearDataListener()

```

### 子应用向基座发送信息  dispatch只接受对象作为参数
```
window.microApp.dispatch({type: '子应用发送的数据'})
```

### 基座应用获取来自子应用的数据
方式1：直接获取数据
```
import microApp from '@micro-zoe/micro-app'

const childData = microApp.getData(appName) // 返回子应用的data数据

```

方式2: 监听自定义事件 (datachange)
```
<template>
  <micro-app
    name='my-app'
    url='xx'
    // 数据在事件对象的detail.data字段中，子应用每次发送数据都会触发datachange
    @datachange='handleDataChange'
  />
</template>

<script>
export default {
  methods: {
    handleDataChange (e) {
      console.log('来自子应用的数据：', e.detail.data)
    }
  }
}
</script>

```
方式3: 绑定监听函数
绑定监听函数需要通过name指定子应用，此值和<micro-app>元素中的name一致。
```
import microApp from '@micro-zoe/micro-app'

function dataListener (data) {
  console.log('来自子应用my-app的数据', data)
}

/**
 * 绑定监听函数
 * appName: 应用名称
 * dataListener: 绑定函数
 * autoTrigger: 在初次绑定监听函数时如果有缓存数据，是否需要主动触发一次，默认为false
 */
microApp.addDataListener(appName: string, dataListener: Function, autoTrigger?: boolean)

// 解绑监听my-app子应用的函数
microApp.removeDataListener(appName: string, dataListener: Function)

// 清空所有监听appName子应用的函数
microApp.clearDataListener(appName: string)

```