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

目录
  • vue3使用element-plus调用message
    • 1. 全局引入element之后
    • 2. 在Composition API中setup方法传入了两个变量
    • 3. 还有一种方法是使用 provide/inject
    • 4. 在Composition api中最简单的写法就是按需引入
  • vue使用Element的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'
});

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • element-plus按需引入后ElMessage与ElLoading在页面中的使用

    element-plus按需引入后ElMessage与ElLoading在页面中的使用

    目录 element-plus按需引入后ElMessage与ElLoading在页面使用 按照官网按需引用element-plus ElMessage与ElLoading使用问题 解决找不到名称“ElMessage”报错 虽然在main.ts中引入可以解决 从element-plus引入ElLoading和ILoadingInstance出现错误 找了一早上的bug终于解决了 element-plus按需引入后ElMessage与ElLoading在页面使用 按照官网按需引用element-pl

  • Vue3.x中使用element-plus的各种方式详解

    Vue3.x中使用element-plus的各种方式详解

    目录 安装element-plus 方式一.全局引入element-plus 方式二.单个组件中使用 方式三.经过自己封装按需引入 1.在项目的src目录下建一个文件夹 global 2.register-element.ts代码如下 3.index.ts代码如下 4.main.ts中引入 安装element-plus element-plus // NPM  npm install element-plus --save // Yarn  yarn add element-plus // pn

  • Vue3实现Message消息组件示例

    Vue3实现Message消息组件示例

    目录 组件设计 定义最终的组件 API 定义组件结构 模板和样式 模板 Template 消息图标 样式 组件脚本 创建组件实例 1.创建包裹容器,并设置外层的 Class 属性 2.创建实例并挂载到 body 3.其中定义取消挂载和重新设置 top 值的方法 实现渲染实例 API 在大多数 web 产品中,全局的 Message 组件占有较大的使用场景,它常出现在给与用户反馈.信息提示和与系统的对话场景中.如果使用传统的组件写法,则需要引入组件并在 components 中注册,然后再去模板中

  • vue3.0中使用element的完整步骤

    vue3.0中使用element的完整步骤

    前言: 在vue3.0中使用element框架,因为element是支持vue2.0的,他推出的支持vue3.0的版本叫 element-plus 官网入口:点我进入 一.个人遇到的问题与解决办法: 遇到的问题: 我直接用cnpm  i element-plus -S 装的版本,不知道为啥,一直报错 图1,版本型号 图2 ,我的代码中使用图3 解决办法: 我把package.json中的element-plus的版本更换成    下面这句话,解决了问题(是否为最新版本问题,还在求证中) "ele

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

    目录 vue3使用element-plus调用message 1. 全局引入element之后 2. 在Composition API中setup方法传入了两个变量 3. 还有一种方法是使用 provide/inject 4. 在Composition api中最简单的写法就是按需引入 vue使用Element的message组件 vue3使用element-plus调用message 环境:vue3+typescript+element-plus 1. 全局引入element之后 elemen

  • Vue3中使用Element Plus时el-icon无法显示的问题解决

    Vue3中使用Element Plus时el-icon无法显示的问题解决

    目录 问题描述 解决方案 总结 问题描述 按照官方文档安装了icons $ npm install @element-plus/icons 然后在页面中使用 <template> <!-- <Header /> --> <!-- Icon 图标 --> <el-icon><edit /></el-icon> <el-icon><fold /></el-icon> <el-icon&

  • Vue3中的ref为何要用.value进行值的调用呢

    目录 Vue3中ref为何要用.value进行值的调用 Vue3 ref告别.value Ref 语法糖在项目中的使用 Vue3中ref为何要用.value进行值的调用 在Vue2中,所有的数据都通过一个Data进行统一的返回,并且在data中对某个组件要用的数据进行统一的管理,常见的使用形式是这样的: <template>   <div class="div">     <todos :Obj="tos" :removeObj=&qu

  • vue3 setup中父组件通过Ref调用子组件的方法(实例代码)

    目录 在setup()钩子函数中调用 在<srcipt setup>中调用 在setup()钩子函数中调用 父组件 <template> <div> 我是父组件 <children ref="childrenRef" /> <button @click="handleChildren">触发子组件</button> </div> </template> <scrip

  • Vue3中slot插槽基本使用

    Vue3中slot插槽基本使用

    目录 1.插槽基本使用 2.插槽默认内容 3.具名插槽 3.1 基本使用 3.2 简写 3.3 默认插槽与具名插槽混用 4.动态插槽名 5.插槽作用域问题 6.作用域插槽 6.1 默认插槽作用域传值 6.2 具名插槽作用域传值 总结 使用Vue的小伙伴相信你一定使用过插槽,如果你没有用过,那说明你的项目可能不是特别复杂.插槽(slot)可以说在一个Vue项目里面处处都有它的身影,比如我们使用一些UI组件库的时候,我们通常可以使用插槽来自定义我们的内容. 1.插槽基本使用 插槽的用途就和它的名字一

  • 利用Vue3实现一个可以用js调用的组件

    利用Vue3实现一个可以用js调用的组件

    目录 前言 一.常规Vue组件 1. 组件主要代码: 2. 使用方式 3. 实现效果 二.改为js调用组件 1. 实现步骤: 2. 具体实现代码: 3. 实现效果展示 总结 前言 项目开发中基本都会用到组件库,但是设计稿样式和功能不一定和组件库相同,尤其像是消息提示弹窗.确认弹窗,各个项目各个设计师都有自己的一套风格.虽然我们可以使用组件库中的组件对其进行样式覆盖来使用.但是一些定制功能还是不容易修改,这种情况我们就会选择自定义组件,然后通过 components 属性引入页面,显式写入标签调用

  • vue3手动封装弹出框组件message的方法

    本文实例为大家分享了vue3手动封装弹出框组件message的具体代码,供大家参考,具体内容如下 封装组件 <template> <Transition name="down"> <div class="xtx-message" :style="style[type]" v-show='isShow'> <!-- 上面绑定的是样式 --> <!-- 不同提示图标会变 --> <i

  • Vue3中10多种组件通讯方法小结

    Vue3中10多种组件通讯方法小结

    目录 Props emits expose / ref Non-Props 单个根元素的情况 多个元素的情况 v-model 单值的情况 多个 v-model 绑定 v-model 修饰符 插槽 slot 默认插槽 具名插槽 作用域插槽 provide / inject 总线 bus getCurrentInstance Vuex State Getter Mutation Action Module Pinia 安装 注册 mitt.js 安装 使用 本文讲解 Vue 3.2 组件多种通讯方式

  • vue2与vue3中生命周期执行顺序的区别说明

    vue2与vue3中生命周期执行顺序的区别说明

    目录 vue2与vue3中生命周期执行顺序区别 生命周期比较 简单例子说明 三种情况下的生命周期执行顺序 1.单页面下生命周期顺序 2.父子.兄弟组件的生命周期顺序 3.不同页面跳转时各页面生命周期的执行顺序 vue2与vue3中生命周期执行顺序区别 生命周期比较 vue2中执行顺序 beforeCreate=>created=>beforeMount =>mounted=>beforeUpdate =>updated=>beforeDestroy=>destro

  • Vue3中使用Supabase Auth方法详解

    目录 引言 安装Supabase 设置Supabase 创建一个AuthUser组合 创建页面 注册.vue EmailConfirmation.vue 登录.vu ForgotPassword.vue Me.vue login() loginWithSocialProvider() logout() isLoggedIn() register() update() sendPasswordResetEmail() 观察Auth状态的变化 测试东西 注销 家庭作业 总结 引言 Supabase是

随机推荐