vue3-teleport-mount，vue3函数渲染组件插件

vue3-teleport-mount

## vue3-teleport-mount有点类似Vue3内置组件<Teleport>。可以通过函数式渲染组件到指定位置，解决函数式渲染组件时，组件无法获取到祖先组件provide值的问题。

源码

安装

npm install vue3-teleport-mount
# Or use pnpm
pnpm install vue3-teleport-mount

使用

1. 注册插件TeleportPlugin

import { TeleportPlugin } from 'vue3-teleport-mount'

const app = createApp(App)
app.use(TeleportPlugin)

2. 设置“传送”出口<TeleportView />

<script setup>
import { TeleportView } from 'vue3-teleport-mount'
</script>

<template>
  <el-config-provider namespace="my-el">
    <TeleportView />
  </el-config-provider>
</template>

示例

<script setup lang="tsx">
import { useTeleport } from 'vue3-teleport-mount'

const { mount, unmount, getInstance } = useTeleport(
  defineAsyncComponent(() => import('./MyComponent.vue')), // 通过defineAsyncComponent引入组件，优化性能
)

const show = async () => {
  const res = await mount({
    title: '标题', // 传递组件的props
  })
  res?.sayHi() // 调用组件方法
}
</script>

<template>
  <el-button @click="show">
    显示
  </el-button>
  <el-button @click="unmount">
    卸载
  </el-button>
</template>

类型定义

useTeleport

function useTeleport<T extends Component>(
  Comp: T,
  to?: string | symbol
): {
  getTeleportInstance: () => InstanceType<T> | undefined
  mount: (props?: unknown) => Promise<InstanceType<T> | undefined>
  unmount: () => void
}

TeleportView

• props

interface TeleportViewProps {
  /**
   * 容器名称
   * 默认值：default
   */
  name?: string | symbol
}

• 示例

<!-- 设置容器名称为默认值：default -->
<TeleportView />
<!-- 设置容器名称为：my-name -->
<TeleportView name="my-name" />

<script setup lang="tsx">
import { useTeleport } from 'vue3-teleport-mount'
import MyComponent from './MyComponent.vue'
import MyComponent2 from './MyComponent2.vue'

const { mount } = useTeleport(MyComponent) // "传送"到 <TeleportView/>
const { mount: mount2 } = useTeleport(MyComponent2, 'my-name') // "传送"到 <TeleportView name="my-name" />


</script>

<template>
  <el-button @click="mount">
    显示组件1
  </el-button>
  <el-button @click="mount2">
    显示组件2
  </el-button>

</template>