Vue全局挂载Element消息组件技巧

文章目录

- 需求
- 分析
- - [Vue 2 + Element UI 方案（原型挂载）](#Vue 2 + Element UI 方案（原型挂载）)
  - [Vue 3 + Element Plus 方案（全局挂载）](#Vue 3 + Element Plus 方案（全局挂载）)
  - - [1. options API](#1. options API)
    - [2. 使用 provide/inject](#2. 使用 provide/inject)
    - [3. 在Composition api中最简单的写法就是按需引入](#3. 在Composition api中最简单的写法就是按需引入)

需求

在每次使用到 Message 的时候，都需要手动先引入import { ElMessage } from 'element-plus'，但是几乎所有组件中都会用到该组件，可以把它挂载到全局使用吗

分析

Vue 2 + Element UI 方案（原型挂载）

步骤一：在入口文件（main.js）中全局挂载

javascript 复制代码

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 单独引入 ElMessage（也可从 ElementUI 解构）
import { Message as ElMessage } from 'element-ui';

// 1. 挂载到 Vue 原型上（所有组件可通过 this.$message 访问）
Vue.prototype.$message = ElMessage;

// 2. 可选：挂载到 window 全局（非组件环境如 utils 也能使用）
window.$message = ElMessage;

Vue.use(ElementUI);
new Vue({
  el: '#app',
  render: h => h(App)
});

步骤 2：组件中直接使用（无需引入）

javascript 复制代码

<template>
  <button @click="showMessage">点击提示</button>
</template>

<script>
export default {
  methods: {
    showMessage() {
      // 直接通过 this.$message 使用
      this.$message.success('全局可用的提示！');
      this.$message.error('错误提示');
    }
  }
};
</script>

Vue 3 + Element Plus 方案（全局挂载）

1. options API

步骤 1：入口文件（main.js/main.ts）配置

javascript 复制代码

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
// 单独引入 ElMessage
import { ElMessage } from 'element-plus';

const app = createApp(App);

// 1. 挂载到全局属性（组件中通过 getCurrentInstance 或 this 访问）
app.config.globalProperties.$message = ElMessage;

// 2. 可选：挂载到 window 全局（任意地方都能直接用）
window.$message = ElMessage;

app.use(ElementPlus).mount('#app');

步骤 2：组件中使用

javascript 复制代码

  mounted(){
    (this as any).$message.success("this.$message");
  }

2. 使用 provide/inject

javascript 复制代码

//main.ts
import { createApp } from 'vue'
import App from './App.vue'
import element from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import {ElMessage} from 'element-plus'
const app = createApp(App)
app.use(element)
//如果没有全局引用element，还需写下面一句
//app.config.globalProperties.$message = ElMessage;
app.provide('$message', ElMessage)
app.mount('#app')

javascript 复制代码

//helloworld.vue
import { inject, defineComponent,onMounted } from 'vue';
export default  = defineComponent{
setup(omprops,content){
    onMounted(()=>{
      (inject('$message') as any).success("inject");
    })
}

3. 在Composition api中最简单的写法就是按需引入

javascript 复制代码

//helloworld.vue
import { inject, defineComponent,onMounted } from 'vue';
import { ElMessage } from 'element-plus'
export default  = defineComponent{
setup(omprops,content){
    onMounted(()=>{
      ElMessage.success('按需引入');
    })
}