Vue Mod Page

概述

这是一个工具库，用于在Vue项目跨越IFrame来调用另一个Vue项目，并且同时支持了Vue2.7和Vue3的跨版本调用。

功能

• 基于IFrame来调用另一个Vue项目（以下称“子项目”）
• 可以在子项目中渲染原生HTML元素，或是已注册为全局组件的Vue组件
• 支持Vue2.7和Vue3的跨版本调用
• 支持属性传参(props)，CSS类(classes)，样式(style)，事件(onXXX)的传递
• 支持子节点(children)渲染
• 支持具名插槽(slot)
• 支持作用域插槽(slot-scope)
• 支持Vue模板引用(ref)

使用

1. 在主项目和子项目中引入该工具库

2. 在子项目中引入Receiver组件，然后将该组件注册到路由上

3. 在子项目中将需要被主项目调用的Vue组件注册为全局组件

   // Vue3
   app.component('MyComponent', MyComponent)
   // Vue2
   Vue.component('MyComponent', MyComponent)
   

4. 在主项目中引入Invoker组件，并传入url和items属性

   • url：子项目Receiver的URL
   • items: 包含子项目渲染元素定义的列表，见InvokerItem的类型定义

5. 根据使用的Vue版本，在两个项目的目录下执行以下命令

   # Vue2.7
   npm run vue-demi-switch 2.7 vue2
   # Vue3
   npm run vue-demi-switch 3
   

6. 运行项目查看效果

注意事项

1. 主项目和子项目需要同源，或是配置好了CORS策略

2. 该库对Vue2.7的支持有限

3. 使用引入模块的方式渲染带有插槽的组件会导致错误，原因未知：
   组件JumpBtn.vue

   <template>
        <div>
            <button @click="HandleClick">
                <slot></slot>
            </button>
        </div>
   </template>
   

   渲染函数

   import JumpBtn from './JumpBtn.vue';
   hh(JumpBtn, null, "插槽内容"); // 会导致错误
   

   若注册为全局组件并在调用渲染函数时使用组件标签名，则不会错误
   main.ts

   import JumpBtn from './JumpBtn.vue';
   app.component('jump-btn', JumpBtn);
   

   渲染函数

   h('jump-btn', null, "插槽内容"); // 并不会报错