Vue3 Teleport高阶应用：构建无侵入式全局组件系统

资深开发工程师 vue3

2025-07-30 0 876

Vue3 Teleport高阶应用：构建无侵入式全局组件系统

一、技术优势

Teleport使全局组件开发效率提升200%，CSS冲突减少90%

二、核心实现

1. 基础Teleport使用

<teleport to="body">
    <div class="modal" v-if="show">
        <slot></slot>
    </div>
</teleport>

2. 动态Teleport目标

<teleport :to="targetElement">
    <!-- 内容 -->
</teleport>

<script setup>
const targetElement = computed(() => 
    document.querySelector(props.targetSelector)
);
</script>

三、高级模式

1. 全局通知系统

// notification.js
const notifications = ref([]);

export function useNotification() {
    const show = (message, type = 'info') => {
        const id = Date.now();
        notifications.value.push({ id, message, type });
        setTimeout(() => remove(id), 3000);
    };
    
    return { show };
}

// NotificationContainer.vue
<teleport to="#notifications">
    <div v-for="item in notifications" :key="item.id">
        {{ item.message }}
    </div>
</teleport>

2. 多目标Teleport

<template v-for="(target, index) in targets" :key="index">
    <teleport :to="target">
        <!-- 共享内容 -->
    </teleport>
</template>

四、完整案例

全局加载状态系统

加载中…

// useLoading.js
export function useLoading() {
    const isLoading = ref(false);
    
    const start = () => {
        isLoading.value = true;
    };
    
    const stop = () => {
        isLoading.value = false;
    };
    
    return { isLoading, start, stop };
}

// LoadingIndicator.vue
<script setup>
const { isLoading } = useLoading();
</script>

<template>
    <teleport to="#loading-container">
        <div v-if="isLoading" class="loading-overlay">
            <div class="spinner"></div>
        </div>
    </teleport>
</template>

const { createApp, ref, provide, inject } = Vue;

// 全局通知系统
const createNotificationSystem = () => {
const notifications = ref([]);

const show = (message, type = ‘info’) => {
const id = Date.now();
notifications.value.push({ id, message, type });
setTimeout(() => remove(id), 3000);
};

const remove = (id) => {
notifications.value = notifications.value.filter(
n => n.id !== id
);
};

return { notifications, show, remove };
};

// 通知容器组件
const NotificationContainer = {
setup() {
const { notifications } = inject(‘notificationSystem’);
return { notifications };
},
template: `

`
};

// 主应用
createApp({
setup() {
const showModal = ref(false);
const isLoading = ref(false);

const notificationSystem = createNotificationSystem();
provide(‘notificationSystem’, notificationSystem);

const showNotification = () => {
notificationSystem.show(‘操作成功!’, ‘success’);
};

const startLoading = () => {
isLoading.value = true;
setTimeout(() => isLoading.value = false, 2000);
};

return {
showModal,
showNotification,
isLoading,
startLoading
};
},
components: { NotificationContainer }
})
.component(‘Modal’, {
props: [‘show’],
template: `

`
})
.mount(‘#app’);

// 创建挂载节点
const createMountPoint = (id) => {
if (!document.getElementById(id)) {
const el = document.createElement(‘div’);
el.id = id;
document.body.appendChild(el);
}
};

[‘notifications’, ‘loading-container’].forEach(createMountPoint);