如何在Vue 3中获取此实例？

Question

在Vue 2+中，我可以轻松地获取this的实例，因此我可以编写以下代码:

// main.js
app.use(ElMessage)

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

对于Vue 3，我该怎么做？

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

- Muhammad Lahin

Answer 1

直接使用ElMessage

ElementPlus支持像使用$message()一样使用ElMessage，可以参考这个示例：

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 在 setup() 钩子函数中提供了一个内部 API getCurrentInstance()。该实例允许通过 appContext.config.globalProperties 访问全局属性（由插件安装）：

import { getCurrentInstance } from "vue";

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

演示

注意：getCurrentInstance()是内部 API，可能会在未来的版本中被删除或重命名。请谨慎使用。

- tony19

Answer 2

提供一种不同的方法，其思路是将一个全局作用域变量设置为视图模型/应用程序或组件的 _component 属性：

pageVM = Vue.createApp({
                data: function () {
                    return {
                        renderComponent: true,
                        envInfo: [],
                        dependencies: [],
                        userGroups: []
                    }
                },
                mounted: function () {
                    //Vue version 3 made it harder to access the viewmodel's properties.    
                    pageVM_props = pageVM._component;
                    this.init();
                },

- Adam R. Turner