如何创建带有可导出函数的Vue组件？实现调用showMessage()触发弹窗

下面以Vue3和React为例，分别实现你要的功能——在弹窗组件内封装逻辑和模板，通过导出的showMessage方法触发弹窗显示。

Vue3 实现方案 #

1. 编写弹窗组件（Message.vue） #

组件内用teleport把弹窗挂载到body避免样式层级问题，同时封装显示逻辑并导出方法：

<template>
  <teleport to="body">
    <div v-if="visible" class="message-modal">
      <div class="message-content">{{ messageText }}</div>
    </div>
  </teleport>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
const messageText = ref('')

// 核心方法：控制弹窗显示
const showMessage = (msg) => {
  messageText.value = msg
  visible.value = true
  // 自动关闭逻辑，可根据需求调整时长
  setTimeout(() => {
    visible.value = false
  }, 3000)
}

// 导出方法供父组件调用
defineExpose({ showMessage })
</script>

<style scoped>
.message-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.15);
  z-index: 9999;
}
</style>

2. 在其他组件中调用 #

通过组件的ref获取实例，直接调用导出的showMessage方法：

<template>
  <button @click="openMessage">点击显示弹窗</button>
  <!-- 引入弹窗组件并绑定ref -->
  <Message ref="messageRef" />
</template>

<script setup>
import { ref } from 'vue'
import Message from './Message.vue'

const messageRef = ref(null)

const openMessage = () => {
  messageRef.value.showMessage('这是一条弹窗消息！')
}
</script>

进阶：全局调用（无需在组件中引入标签） #

如果希望不用写组件标签就能全局调用，可以在main.js中注册全局方法：

import { createApp } from 'vue'
import App from './App.vue'
import Message from './Message.vue'

const app = createApp(App)

// 创建弹窗实例并挂载到body
const messageEl = document.createElement('div')
const messageInstance = createApp(Message).mount(messageEl)
document.body.appendChild(messageEl)

// 挂载到全局属性，方便任意组件调用
app.config.globalProperties.$showMessage = messageInstance.showMessage

app.mount('#app')

之后在任意组件里直接调用：

<script setup>
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

const openGlobalMessage = () => {
  proxy.$showMessage('全局调用的弹窗消息')
}
</script>

React 实现方案 #

1. 编写弹窗组件（Message.jsx） #

用createPortal挂载弹窗到body，同时封装全局调用的方法：

import { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
import ReactDOM from 'react-dom/client';

// 用forwardRef暴露内部方法
const Message = forwardRef((props, ref) => {
  const [visible, setVisible] = useState(false);
  const [message, setMessage] = useState('');
  const timerRef = useRef(null);

  // 暴露给外部的方法
  useImperativeHandle(ref, () => ({
    showMessage: (msg) => {
      setMessage(msg);
      setVisible(true);
      // 清除之前的定时器，避免重复触发
      if (timerRef.current) clearTimeout(timerRef.current);
      timerRef.current = setTimeout(() => {
        setVisible(false);
      }, 3000);
    }
  }));

  // 组件卸载时清除定时器
  useEffect(() => {
    return () => {
      if (timerRef.current) clearTimeout(timerRef.current);
    };
  }, []);

  // 用Portal挂载到body
  return visible ? ReactDOM.createPortal(
    <div className="message-modal">
      <div className="message-content">{message}</div>
    </div>,
    document.body
  ) : null;
});

// 创建全局实例，方便直接调用方法
let messageInstance = null;
const getMessageInstance = () => {
  if (!messageInstance) {
    const root = ReactDOM.createRoot(document.createElement('div'));
    const ref = useRef(null);
    root.render(<Message ref={ref} />);
    document.body.appendChild(root._internalRoot.containerInfo);
    messageInstance = ref.current;
  }
  return messageInstance;
};

// 导出全局调用的方法
export const showMessage = (msg) => {
  getMessageInstance().showMessage(msg);
};

export default Message;

2. 在其他组件中调用 #

直接导入导出的showMessage方法即可，无需引入组件标签：

import { showMessage } from './Message';

function App() {
  return (
    <button onClick={() => showMessage('React弹窗消息！')}>点击显示弹窗</button>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者looqey