高开容器

# 1.引入高开组件：

功能：在低开表单中，使用高开容器组件来引用高开页面

在高开模块标识中选择模块。

前提：引入的高开资源是已配置好的，如果从头搭建一个微前端页面并添加代理，具体详见配置微前端资源
在高开页面标识选择页面，也可自定义输入

场景：在低开表单中引入高开组件

步骤1. 在高开页面标识选择微前端模块myApp

步骤2. 在页面标识中输入demo

前提：页面标识是微前端项目中对外暴露的页面

高开页面的代码：

<template>
  <div>
    <el-descriptions class="margin-top" title="用户信息" :column="3" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        {{ user.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          居住地
        </template>
        {{ user.address }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          身份
        </template>
        <el-tag size="small">{{ user.status }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
export default {
  name: 'name', // 和菜单代码一致即可开启页面缓存
  data(){
      return {
       user: {
          name: '曾用名',
          address: '杭州市',
          status: '学生'
        }
      }
  }
</script>

效果图：

# 2. 低开给高开组件传参

功能：在高开页面中，使用低开表单传入的参数

步骤1. 在高级的扩展属性里添加参数的属性名和属性值

高开容器-02

在高开页面中的props接参（避免与data中的属性名重名）

props: {
    user: {
      type: Object,
      default: () => {}
    },
  },

场景：在高开页面中，使用低开表单传入的参数

步骤1. 添加属性名为user，值为v_user的变量，v_user的默认值如下：

{
   name: 'kooriookami',
    phoneNumber: '18100000000',
    address: '苏州市',
    status: '学生'
}

高开容器-02

步骤2. 页面接收参数user（这里的user要与高开容器的属性名user对应）

 props: {
    user: {
      type: Object,
      // 默认值
      default: () => {
        return {
          name: '曾用名',
          address: '杭州市',
          status: '学生'
        }
      }
    },
  }

高开页面代码：

<template>
  <div>
    <el-descriptions class="margin-top" title="用户信息" :column="3" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        {{ user.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          居住地
        </template>
        {{ user.address }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          身份
        </template>
        <el-tag size="small">{{ user.status }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
export default {
  name: 'name', // 和菜单代码一致即可开启页面缓存
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          name: '曾用名',
          address: '杭州市',
          status: '学生'
        }
      }
    },
  },
}
</script>

效果图：

高开容器-02

# 3. ⾼开组件修改低开传⼊参数

功能：在已有传参的高开页面中，修改低开传入的参数

步骤1. 给高开容器添加事件-属性值变化时，并在代码块中修改V_user的值

this.v_user = value

高开容器-02

步骤2. 高开页面中修改参数，需要触发dataChange事件，代码如下：

this.$emit('dataChange', user)

场景：在已有传参的高开页面中，修改低开传入的参数

步骤1. 给高开容器控件添加事件（属性值变化时）

高开容器-02

步骤2. 高开页面中触发dataChange事件，代码如下：

<template>
  <div>
    <el-descriptions class="margin-top" title="用户信息" :column="3" border>
      <template slot="extra">
        <el-button type="primary" size="small" @click="changeStatus">修改身份</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        {{ user.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          居住地
        </template>
        {{ user.address }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          身份
        </template>
        <el-tag size="small">{{ user.status }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
export default {
  name: 'name', // 和菜单代码一致即可开启页面缓存
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          name: '曾用名',
          address: '杭州市',
          status: '学生'
        }
      }
    },
  },
  methods:{
    changeStatus() {
      const user = {
        ...this.user,
        status: '打工人'
      }
      this.$emit('dataChange', user)
    }
  }
}
</script>

效果图：点击按钮，页面数据改变

高开容器-02