82 lines
2.2 KiB
Markdown
82 lines
2.2 KiB
Markdown
# 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组件注册为全局组件
|
||
|
||
```vue
|
||
// Vue3
|
||
app.component('MyComponent', MyComponent)
|
||
// Vue2
|
||
Vue.component('MyComponent', MyComponent)
|
||
```
|
||
|
||
4. 在主项目中引入`Invoker`组件，并传入`url`和`items`属性
|
||
- `url`：子项目`Receiver`的URL
|
||
- `items`: 包含子项目渲染元素定义的列表，见`InvokerItem`的类型定义
|
||
5. 根据使用的Vue版本，在两个项目的目录下执行以下命令
|
||
|
||
```sh
|
||
# 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`
|
||
|
||
```vue
|
||
<template>
|
||
<div>
|
||
<button @click="HandleClick">
|
||
<slot></slot>
|
||
</button>
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
渲染函数
|
||
|
||
```ts
|
||
import JumpBtn from './JumpBtn.vue';
|
||
hh(JumpBtn, null, "插槽内容"); // 会导致错误
|
||
```
|
||
|
||
若注册为全局组件并在调用渲染函数时使用组件标签名，则不会错误
|
||
`main.ts`
|
||
|
||
```ts
|
||
import JumpBtn from './JumpBtn.vue';
|
||
app.component('jump-btn', JumpBtn);
|
||
```
|
||
|
||
渲染函数
|
||
|
||
```ts
|
||
h('jump-btn', null, "插槽内容"); // 并不会报错
|
||
```
|