安装 #

可能的安装方式 #

NPM #

这是安装此插件的推荐方法。

使用 npm 作为依赖项安装

npm i portal-vue

# or with yarn, respectively:
yarn add portal-vue

然后在您的应用程序中包含该包并安装插件

import PortalVue from 'portal-vue'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.use(PortalVue)

app.mount('#app')

CDN #

PortalVue 可通过几个 CDN 获得，我推荐 unpkg.com

只需在 Vue.js 的脚本标签之后包含脚本标签

<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="http://unpkg.com/portal-vue"></script>

组件将分别命名为<portal>和<portal-target>。

选项 #

使用Vue.use()安装时，您可以传递选项来更改组件名称。

app.use(PortalVue, {
  portalName: 'my-portal', // default: 'portal'
  portalTargetName: 'my-target', // default:'portal-target'
})

这些选项将使组件分别在全局范围内可用为<my-portal>和<my-target>。

在本地使用组件 #

如果您不想在全局范围内注册组件，可以本地导入组件。但您仍然需要安装插件。只需为组件选项传递false

app.use(PortalVue, {
  portalName: false,
  portalTargetName: false,
})

然后在您需要它们的那些组件中导入组件，并在本地注册它们，这也允许您重命名它们

import { Portal, PortalTarget } from 'portal-vue'

export default {
  components: {
    MyPortal: Portal,
    PortalTarget,
  },
}

Typescript #

Portal-Vue 3 附带完整的 TS 支持。如果您在全局范围内注册了组件，您需要通过添加一个 d.ts. 文件来告诉您的 Vue IDE 扩展 (Volar) 关于它们，该文件声明了这些全局注册的组件

declare module 'vue' {  // Vue 3
    export interface GlobalComponents {
      Portal: typeof import('portal-vue')['Portal']
      PortalTarget: typeof import('portal-vue')['PortalTarget']
    }
  }
  
  export {}

不要忘记在您的 tsconfig 中"include"此文件。

自定义虫洞实例 #

如果您可能在一个页面上有多个 Vue 应用程序，您可以通过为您的应用程序创建自己的虫洞实例来避免名称冲突。这也意味着您的应用程序不能向页面中运行的其他应用程序中的PortalTarget组件发送内容，因此这可能是一个极端情况。

import PortalVue, { createWormhole } from 'portal-vue'
app.use(PortalVue, {
  wormhole: createWormhole()
})

版本 #

Portal-Vue 以四种不同的版本发布。

备注

UMD #

从 CDN 包含 Portal-vue 时，请确保您获得了 UMD 版本之一。

关于 CDN：unpkg.com和jsdelivr.com会自动加载 umd 库。

如果您从其他来源直接在 HTML 中包含它，请确保导入portal-vue/dist/portal-vue.umd.min.js

ESM #

Webpack >=2、rollup 和 parcel 都可以原生理解 ES 模块，因此这是与这些捆绑器一起使用的最佳版本。

ESM 版本被标记为package.json的默认导出，用于理解package.json中的"module"字段的消费者（这是上述所有捆绑器的情况），因此执行import PortalVue from 'portal-vue'将自动为您提供 ESM 版本，如果捆绑器支持它。