vue3中实现使用element-plus调用message

 更新时间:2022年09月06日 14:06:10   作者:云孜微殇  
这篇文章主要介绍了vue3中实现使用element-plus调用message,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue3使用element-plus调用message

环境:vue3+typescript+element-plus

1. 全局引入element之后

element已经在 app.config.globalProperties 添加了全局方法 $message

所以在options API中可以直接使用

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

2. 在Composition API中setup方法传入了两个变量

props和context,context作为上下文取代this,但是context中只有emit,attrs,和slots,而直接在setup中使this,会出现问题:官方网站的说明:

在 setup() 内部,this 不会是该活跃实例的引用,因为 setup() 是在解析其它组件选项之前被调用的,所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。

所以可以使用getCurrentInstance方法获取实例。此方法在全局引入element-plus之后就可直接使用

//helloworld.vue
import { getCurrentInstance, defineComponent,onMounted } from 'vue';
export default  = defineComponent{
setup(omprops,content){
    onMounted(()=>{
      getCurrentInstance()?.appContext.config.globalProperties.$message.success("聪明");
    })
}

3. 还有一种方法是使用 provide/inject

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

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

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

vue使用Element的message组件

在vue文件中使用

this.$message({
  message: "提示信息",
  type: "success"
})

在js文件中使用

ElementUI.Message({
  message: '提示信息',
  type: 'warning'
});

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue使用blob下载文件遇到的问题小结

    vue使用blob下载文件遇到的问题小结

    Blob 对象表示一个不可变、原始数据的类文件对象,这篇文章主要介绍了vue使用blob下载文件遇到的问题记录,需要的朋友可以参考下
    2024-02-02
  • vue中使用vue-cli接入融云实现即时通信

    vue中使用vue-cli接入融云实现即时通信

    这篇文章主要介绍了vue中使用vue-cli接入融云实现即时通信的相关资料,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • Vue.js学习笔记之常用模板语法详解

    Vue.js学习笔记之常用模板语法详解

    本篇文章主要介绍了Vue.js学习笔记之常用模板语法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Vue 使用v-model实现控制子组件显隐效果

    Vue 使用v-model实现控制子组件显隐效果

    v-model 可以实现双向绑定的效果,允许父组件控制子组件的显示/隐藏,同时允许子组件自己控制自身的显示/隐藏,本文给大介绍Vue 使用v-model实现控制子组件显隐,感兴趣的朋友一起看看吧
    2023-11-11
  • elementui el-calendar日历组件使用示例

    elementui el-calendar日历组件使用示例

    这篇文章主要为大家介绍了elementui el-calendar日历组件使用示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • Vue异步组件处理路由组件加载状态的解决方案

    Vue异步组件处理路由组件加载状态的解决方案

    这篇文章主要介绍了Vue异步组件处理路由组件加载状态的解决方案,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • electron踩坑之dialog中的callback解决

    electron踩坑之dialog中的callback解决

    这篇文章主要介绍了electron踩坑之dialog中的callback解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • Vue3使用element-plus组件不显示问题

    Vue3使用element-plus组件不显示问题

    这篇文章主要介绍了Vue3使用element-plus组件不显示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue路由跳转方式区别汇总(push,replace,go)

    Vue路由跳转方式区别汇总(push,replace,go)

    vue项目中点击router-link标签链接都属于声明式导航。vue项目中编程式导航有this.$router.push(),this.$router.replace(),this.$router.go()​​​​​​​。这篇文章主要介绍了Vue路由跳转方式区别汇总(push,replace,go)
    2022-12-12
  • Vue使用html2canvas实现截取图片并保存

    Vue使用html2canvas实现截取图片并保存

    html2canvas是一个JavaScript库,它可以将HTML元素转换为Canvas元素本文将介绍一下Vue如何使用html2canvas实现截取图片并保存功能,需要的可以参考下
    2023-12-12

最新评论