如何在vue 3中获得此实例？
如何在vue 3中获得此实例？
提问于 2021-04-05 18:05:28
在vue 2+中，我可以很容易地得到this的实例，因此我可以编写这样的东西，
// main.js
app.use(ElMessage)
// home.vue
this.$message({
showClose: true,
message: 'Success Message',
type: 'success',
})我该为vue 3做些什么，
内部安装()，这将不是对当前活动实例的引用，因为setup()是在其他组件选项被解析之前调用的，它在其他选项中的行为将与其他选项中的行为非常不同。这可能会在其他Options中使用setup()时造成混淆。- vue 3医生
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-04-05 23:41:07
直接使用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在getCurrentInstance()内部提供了钩子 (一个内部API)。该实例允许通过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()可能会被删除/重命名。请谨慎使用。
Stack Overflow用户
发布于 2022-07-12 14:26:23
提供了一种不同的方法，其中的想法是为viewmodel/app或组件的_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();
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66957578
复制相关文章
相似问题
腾讯云开发者
