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如何使用watch监听指定数据的变化

    vue如何使用watch监听指定数据的变化

    这篇文章主要介绍了vue如何使用watch监听指定数据的变化,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 分享一个基于Ace的Markdown编辑器

    分享一个基于Ace的Markdown编辑器

    相信开发中或多或少都会有使用md的时候。那么一个简易的md编辑器显得尤为重要,如果想要在自己的项目中添加一个md编辑器,那么不妨来看看这篇文章
    2021-10-10
  • 在vue中写jsx的几种方式

    在vue中写jsx的几种方式

    本文主要介绍了在vue中写jsx的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • vue组件定义,全局、局部组件,配合模板及动态组件功能示例

    vue组件定义,全局、局部组件,配合模板及动态组件功能示例

    这篇文章主要介绍了vue组件定义,全局、局部组件,配合模板及动态组件功能,结合实例形式分析了vue.js中组件的定义、全局组件、局部组件、配合模板组件及动态组件的相关使用方法与操作注意事项,需要的朋友可以参考下
    2019-03-03
  • 解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题

    解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit(

    这篇文章主要介绍了vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效的解决方法,这里需要主要项目中用的element-ui是V1.4.3,感兴趣的朋友参考下吧
    2018-08-08
  • Antd的Table组件嵌套Table以及选择框联动操作

    Antd的Table组件嵌套Table以及选择框联动操作

    这篇文章主要介绍了Antd的Table组件嵌套Table以及选择框联动操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 详解nuxt路由鉴权(express模板)

    详解nuxt路由鉴权(express模板)

    这篇文章主要介绍了详解nuxt路由鉴权(express模板),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • vue2中Print.js的使用超详细讲解(pdf、html、json、image)

    vue2中Print.js的使用超详细讲解(pdf、html、json、image)

    项目中有用到打印功能,网上就找了print.js,下面这篇文章主要给大家介绍了关于vue2中Print.js使用(pdf、html、json、image)的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • vue.js实现只弹一次弹框

    vue.js实现只弹一次弹框

    本篇文章通过代码实例给大家详细讲述了一个vue的实例,实现只弹一次弹框功能,一起学习分享下。
    2018-01-01
  • vue.js中mint-ui框架的使用方法

    vue.js中mint-ui框架的使用方法

    这篇文章主要为大家详细介绍了vue.js中使用mint-ui框架的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论