useDynamic

动态组件渲染 Hook，用于在运行时动态挂载和销毁 Vue 组件。

安装

npm i dynamic-render

引入

import { useDynamic } from 'dynamic-render';

API

useDynamic(component, initialProps?, options?)

创建一个动态组件渲染器。

参数

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | component | Component | 是 | - | 要动态渲染的 Vue 组件 | | initialProps | object | 否 | {} | 组件的初始 props | | options | DynamicOptions | 否 | {} | 配置选项 |

DynamicOptions

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | teleportTo | string \| HTMLElement | document.body | Teleport 目标元素，支持选择器或 DOM 元素 |

返回值

返回 DynamicInstance 对象：

| 方法 | 说明 | |------|------| | load(slots?, slotProps?, modalReplenishProps?) | 加载动态组件，返回包含 destroy 方法的对象 | | destroyAll() | 销毁所有动态创建的实例 |

load 参数

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | slots | Component | 否 | - | 插槽组件 | | slotProps | object | 否 | {} | 传递给插槽组件的 props | | modalReplenishProps | object | 否 | {} | 补充传递给主组件的 props，会覆盖 initialProps |

使用示例

基础用法

<script setup>
import { useDynamic } from './index';
import MyModal from './MyModal.vue';

const { load, destroyAll } = useDynamic(MyModal, {
    title: '默认标题',
});

function openModal() {
    const instance = load();
    // 手动销毁
    // instance.destroy();
}

function closeModal() {
    destroyAll();
}
</script>

<template>
    <button @click="openModal">打开弹窗</button>
</template>

使用 Teleport

<script setup>
import { useDynamic } from './index';
import MyModal from './MyModal.vue';

const { load } = useDynamic(MyModal, {}, {
    teleportTo: '#modal-container', // 支持选择器
    // teleportTo: document.body,   // 也支持 DOM 元素
});

function openModal() {
    load();
}
</script>

<template>
    <div id="modal-container"></div>
    <button @click="openModal">打开弹窗</button>
</template>

传递插槽组件

<script setup>
import { useDynamic } from './index';
import MyModal from './MyModal.vue';
import ModalContent from './ModalContent.vue';

const { load } = useDynamic(MyModal);

function openModal() {
    load(ModalContent, { id: 123 }, { title: '自定义标题' });
    // ModalContent 作为 MyModal 的默认插槽
    // { id: 123 } 传递给 ModalContent
    // { title: '自定义标题' } 传递给 MyModal
}
</script>

动态更新 Props

<script setup>
import { ref } from 'vue';
import { useDynamic } from './index';
import MyModal from './MyModal.vue';

const count = ref(0);

function openModal() {
    count.value++;
    load(null, {}, { count: count.value });
}
</script>

注意事项

1. 必须在 setup 中调用：useDynamic 依赖 getCurrentInstance()，只能在 setup() 函数或 <script setup> 中使用。

2. 自动清理：组件卸载时会自动销毁所有动态创建的实例，无需手动调用 destroyAll()。

3. Props 合并：modalReplenishProps 会覆盖 initialProps 中的同名属性。

4. 响应性：props 在 load 时合并，后续修改原始值不会影响已加载的组件。如需更新，请重新调用 load。

类型定义

import { Component } from 'vue';

export interface DynamicOptions {
    teleportTo?: string | HTMLElement;
}

export interface LoadResult {
    destroy: () => void;
}

export interface DynamicInstance {
    load: <S = Record<string, unknown>, P = Record<string, unknown>>(
        slots?: Component,
        slotProps?: S,
        modalReplenishProps?: P
    ) => LoadResult;
    destroyAll: () => void;
}

export function useDynamicRender<P = Record<string, unknown>>(
    component: Component,
    initialProps?: P,
    options?: DynamicOptions
): DynamicInstance;