Vue2函数式组件实战：手写可调用的动态组件，适用于toast轻提示、tip提示、dialog弹窗等

news2025/4/3 18:41:30

Vue2函数式组件实战：手写可调用的动态组件

在这里插入图片描述

一、需求场景分析

在开发中常遇到需要动态调用的组件场景：

全局弹窗提示
即时消息通知
动态表单验证
需要脱离当前DOM树的悬浮组件

传统组件调用方式的痛点：必须预先写入模板，可能还要用ref绑定组件

<template>
  <!-- 必须预先写入模板 -->
  <MyComponent v-if="show" :content="text"/>
</template>

二、函数式组件实现方案

//myComponent.js
import MyComponent from './MyComponent.vue';
import Vue from 'vue';

let instance;

//实例初始化
function initInstance(){
    //先销毁已有实例，单例模式
    if(instance){
        instance.$destroy();
        // 显式移除DOM
        instance.$el.parentNode.removeChild(instance.$el) 
    }
    instance = new (Vue.extend(MyComponent))({
        el: document.createElement('div')
    });

    //自定义事件，控制组件显隐
    instance.$on('show',value=>{
        instance.value = value
    })
}

//函数式组件调用
function myComponent(options){
    if(!instance){
        initInstance();
    }
    //复制传参并控制显示组件
    Vue.nextTick(() => {
        Object.keys(options).forEach(key => {
            instance[key] = options[key]
        })
        instance.value = true
    })
}

myComponent.Component = MyComponent;
export default myComponent;

<template>
  <transition name="fade">
    <div v-show="value" class="component-wrapper">
      <div class="header">
        <slot name="header">{{ title }}</slot>
      </div>
      <div class="content">
        {{ content }}
      </div>
      <div class="footer">
        <button @click="handleClose">关闭</button>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    content: String,
    title: {
      type: String,
      default: '提示'
    }
  },
  mounted() {
    // 智能挂载到最近的dialog-container
    const container = document.querySelector('.dialog-container') || document.body
    container.appendChild(this.$el)
  },
  methods: {
    handleClose() {
            this.$emit('show',false);
    }
  },
  beforeDestroy() {
    // 安全移除DOM
    if (this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el)
    }
  }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

三、综合分析

使用方式对比

传统组件调用

<template>
  <button @click="show = true">打开</button>
  <MyComponent v-if="show" @close="show = false"/>
</template>

<script>
export default {
  data: () => ({
    show: false
  })
}
</script>

函数式组件调用

import { myComponent} from '@/utils/myComponent'

// 任意位置调用
showComponent({
  content: '操作成功',
  title: '系统提示',
})

弹窗需要考虑的问题

当页面滚动时，弹窗是否需要滚动？是否会被其他元素遮挡
移动端如何避免点击穿透问题
当频繁触发弹窗时，如何确保弹窗的内容/显隐时间正常

进阶优化建议

多实例支持

function createInstance() {
  return new (Vue.extend(MyComponent))({
    el: document.createElement('div')
  })
}

export function showComponent(options) {
  const instance = createInstance()
  // 单独管理实例
}