526互联

vue3——全局挂载，getCurrentInstance，proxy属性

发布时间 2023-10-07 11:04:41作者: 游戏三昧的木笔

1. messageTools/index.ts

import {ElMessage} from "element-plus"

export default {
  // 普通消息提示
  msg(text:any) {
    ElMessage(text);
  },
  // 成功消息提示
  msgSuccess(text:any) {
    ElMessage({
      message: text,
      type: "success"
    });
  },
  // 错误消息提示
  msgError(text:any) {
    ElMessage.error(text);
  },
  // 警告消息提示
  msgWarning(text:any) {
    ElMessage({
      message: text,
      type: "warning"
    });
  },  
}

2. main.ts

import {createApp} from "vue"
import App from "./App.vue"
// 全局引入messageTool
import messageTool from "./messageTools"

const app = createApp(App);
// 挂载方法到实例上
app.config.globalProperties.$messageTool = messageTool;

3. demo/index.ts

<script lang="ts" setup>
import {getCurrentInstance} from "vue";
// ctx和proxy都是getCurrentInstance属性，但ctx只能在开发环境下使用，生产环境下的ctx访问不到；
// proxy在开发环境和生产环境中都能放到组件的上下文对象(推荐使用proxy)
//  const { ctx }  = getCurrentInstance();  
const { proxy }  = getCurrentInstance();

onMounted(() => {
   getMessage();
});
// 消息提示
const getMessage = () => {
   proxy.$messageTool.msgWarning("警告消息提示")
}
</script>