vue3中實現(xiàn)使用element-plus調(diào)用message
更新時間：2022年09月06日 14:06:10 作者：云孜微殤
這篇文章主要介紹了vue3中實現(xiàn)使用element-plus調(diào)用message，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
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方法傳入了兩個變量
props和context，context作為上下文取代this，但是context中只有emit，attrs,和slots，而直接在setup中使this，會出現(xiàn)問題：官方網(wǎng)站的說明：
在 setup() 內(nèi)部，this 不會是該活躍實例的引用，因為 setup() 是在解析其它組件選項之前被調(diào)用的，所以 setup() 內(nèi)部的 this 的行為與其它選項中的 this 完全不同。這在和其它選項式 API 一起使用 setup() 時可能會導(dǎo)致混淆。
所以可以使用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'
});以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Blob?對象表示一個不可變、原始數(shù)據(jù)的類文件對象，這篇文章主要介紹了vue使用blob下載文件遇到的問題記錄,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue中使用vue-cli接入融云實現(xiàn)即時通信的相關(guān)資料,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
本篇文章主要介紹了Vue.js學(xué)習(xí)筆記之常用模板語法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
Vue 使用v-model實現(xiàn)控制子組件顯隱效果
v-model 可以實現(xiàn)雙向綁定的效果,允許父組件控制子組件的顯示/隱藏,同時允許子組件自己控制自身的顯示/隱藏,本文給大介紹Vue 使用v-model實現(xiàn)控制子組件顯隱,感興趣的朋友一起看看吧2023-11-11
這篇文章主要為大家介紹了elementui?el-calendar日歷組件使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
這篇文章主要介紹了Vue異步組件處理路由組件加載狀態(tài)的解決方案，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了electron踩坑之dialog中的callback解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要介紹了Vue3使用element-plus組件不顯示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue路由跳轉(zhuǎn)方式區(qū)別匯總（push，replace，go）
vue項目中點擊router-link標簽鏈接都屬于聲明式導(dǎo)航。vue項目中編程式導(dǎo)航有this.$router.push(),this.$router.replace(),this.$router.go()???????。這篇文章主要介紹了Vue路由跳轉(zhuǎn)方式區(qū)別匯總（push，replace，go）2022-12-12
Vue使用html2canvas實現(xiàn)截取圖片并保存
html2canvas是一個JavaScript庫,它可以將HTML元素轉(zhuǎn)換為Canvas元素本文將介紹一下Vue如何使用html2canvas實現(xiàn)截取圖片并保存功能,需要的可以參考下2023-12-12