So verwenden Sie element-plus, um eine Nachricht in vue3 aufzurufen

vue3 verwendet element-plus, um message aufzurufen

Umgebung: vue3+typescript+element-plus

1. Nach der globalen Einführung von element hat element die globale Methode $message

in app.config hinzugefügt. globalProperties

So kann es direkt in der Options-API verwendet werden

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

2 In der Kompositions-API übergibt die Setup-Methode zwei Variablen

context ersetzt dies als Kontext, aber context hat nur emit, attrs,. und Slots, und die direkte Verwendung im Setup führt zu Problemen: Beschreibung von der offiziellen Website:

In setup() ist dies kein Verweis auf die aktive Instanz, da setup() aufgerufen wird, bevor andere Komponentenoptionen analysiert werden Dieses innere setup() verhält sich völlig anders als dies in anderen Optionen. Wenn Sie es mit anderen optionalen APIs in setup() verwenden, kann es zu Verwirrung kommen.

Daher kann die Instanz durch Aufrufen der Methode getCurrentInstance abgerufen werden. Diese Methode kann direkt nach der globalen Einführung von element-plus verwendet werden Die Nachrichtenkomponente

wird in Vue-Dateien

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

wird in JS-Dateien

//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')

verwendet

Das obige ist der detaillierte Inhalt vonSo verwenden Sie element-plus, um eine Nachricht in vue3 aufzurufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!