vue3中實(shí)現(xiàn)使用element-plus調(diào)用message
更新時(shí)間：2022年09月06日 14:06:10 作者：云孜微殤
這篇文章主要介紹了vue3中實(shí)現(xiàn)使用element-plus調(diào)用message，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue3使用element-plus調(diào)用message
環(huán)境：vue3+typescript+element-plus
1. 全局引入element之后
element已經(jīng)在 app.config.globalProperties 添加了全局方法 $message
所以在options API中可以直接使用
? mounted(){
? ? (this as any).$message.success("this.$message");
? }2. 在Composition API中setup方法傳入了兩個(gè)變量
props和context，context作為上下文取代this，但是context中只有emit，attrs,和slots，而直接在setup中使this，會(huì)出現(xiàn)問(wèn)題：官方網(wǎng)站的說(shuō)明：
在 setup() 內(nèi)部，this 不會(huì)是該活躍實(shí)例的引用，因?yàn)?setup() 是在解析其它組件選項(xiàng)之前被調(diào)用的，所以 setup() 內(nèi)部的 this 的行為與其它選項(xiàng)中的 this 完全不同。這在和其它選項(xiàng)式 API 一起使用 setup() 時(shí)可能會(huì)導(dǎo)致混淆。
所以可以使用getCurrentInstance方法獲取實(shí)例。此方法在全局引入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)
//如果沒(méi)有全局引用element，還需寫(xiě)下面一句
//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中最簡(jiǎn)單的寫(xiě)法就是按需引入
//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'
});以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于Vue3和element-plus實(shí)現(xiàn)登錄功能(最終完整版)
- vue3使用element-plus中el-table組件報(bào)錯(cuò)關(guān)鍵字'emitsOptions'與'insertBefore'分析
- element-plus 在vue3 中不生效的原因解決方法(element-plus引入)
- Vue3+Element-plus項(xiàng)目自動(dòng)導(dǎo)入報(bào)錯(cuò)的解決方案
- Vue3.x中使用element-plus的各種方式詳解
- vue3引入Element-plus的詳細(xì)步驟記錄
- vue3?element-plus?實(shí)現(xiàn)表格數(shù)據(jù)更改功能詳細(xì)步驟
相關(guān)文章
vue如何使用watch監(jiān)聽(tīng)指定數(shù)據(jù)的變化
這篇文章主要介紹了vue如何使用watch監(jiān)聽(tīng)指定數(shù)據(jù)的變化，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
相信開(kāi)發(fā)中或多或少都會(huì)有使用md的時(shí)候。那么一個(gè)簡(jiǎn)易的md編輯器顯得尤為重要，如果想要在自己的項(xiàng)目中添加一個(gè)md編輯器，那么不妨來(lái)看看這篇文章2021-10-10
本文主要介紹了在vue中寫(xiě)jsx的幾種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue組件定義，全局、局部組件，配合模板及動(dòng)態(tài)組件功能示例
這篇文章主要介紹了vue組件定義，全局、局部組件，配合模板及動(dòng)態(tài)組件功能,結(jié)合實(shí)例形式分析了vue.js中組件的定義、全局組件、局部組件、配合模板組件及動(dòng)態(tài)組件的相關(guān)使用方法與操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
解決vue2.0 element-ui中el-upload的before-upload方法返回false時(shí)submit(
這篇文章主要介紹了vue2.0 element-ui中el-upload的before-upload方法返回false時(shí)submit()不生效的解決方法，這里需要主要項(xiàng)目中用的element-ui是V1.4.3，感興趣的朋友參考下吧2018-08-08
Antd的Table組件嵌套Table以及選擇框聯(lián)動(dòng)操作
這篇文章主要介紹了Antd的Table組件嵌套Table以及選擇框聯(lián)動(dòng)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了詳解nuxt路由鑒權(quán)(express模板)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
vue2中Print.js的使用超詳細(xì)講解（pdf、html、json、image）
項(xiàng)目中有用到打印功能,網(wǎng)上就找了print.js,下面這篇文章主要給大家介紹了關(guān)于vue2中Print.js使用（pdf、html、json、image）的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
本篇文章通過(guò)代碼實(shí)例給大家詳細(xì)講述了一個(gè)vue的實(shí)例，實(shí)現(xiàn)只彈一次彈框功能，一起學(xué)習(xí)分享下。2018-01-01
這篇文章主要為大家詳細(xì)介紹了vue.js中使用mint-ui框架的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05