如何在vue 3中获取this实例？

Question

在 vue 2+ 中，我可以轻松获取 的实例，this因此我可以编写如下内容，

// main.js
app.use(ElMessage)

// home.vue
this.$message({
  showClose: true,
  message: 'Success Message',
  type: 'success',
})

我应该为 vue 3 做什么，

在 setup() 内部，这不会是对当前活动实例的引用 由于 setup() 是在其他组件选项解析之前调用的，因此 setup() 内部的 this 的行为将与其他选项中的 this 的行为完全不同。当与其他选项 API 一起使用 setup() 时，这可能会导致混乱。-vue 3 文档。

Answer 1

ElMessage直接使用

ElementPlus 支持使用ElMessage与 相同的方式，如本例$message()所示：

import { ElMessage } from 'element-plus'

export default {
  setup() {
    const open1 = () => {
      ElMessage('this is a message.')
    }
    const open2 = () => {
      ElMessage({
        message: 'Congrats, this is a success message.',
        type: 'success',
      })
    }

    return {
      open1,
      open2,
    }
  }
}

使用$message()

Vue 3在hookgetCurrentInstance()内部提供了（一个内部 API）。该实例允许通过以下方式访问全局属性（从插件安装）：setup()appContext.config.globalProperties

import { getCurrentInstance } from "vue";

export default {
  setup() {
    const globals = getCurrentInstance().appContext.config.globalProperties;
    return {
      sayHi() {
        globals.$message({ message: "hello world" });
      },
    };
  },
};

演示

注意：作为内部 API，getCurrentInstance()可能会在未来版本中删除/重命名。谨慎使用。