Comment utiliser element-plus pour appeler un message dans vue3

vue3 utilise element-plus pour appeler message

Environnement : vue3+typescript+element-plus

1 Après avoir introduit l'élément globalement

element a ajouté la méthode globale $message

dans app.config. globalProperties

Il peut donc être utilisé directement dans l'API d'options

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

2. Dans l'API Composition, la méthode de configuration transmet deux variables

props et le contexte le remplace comme contexte, mais le contexte n'a qu'émettre, attrs, et les slots, et si vous l'utilisez directement dans setup, des problèmes surgiront : Description sur le site officiel :

Dans setup(), ce ne sera pas une référence à l'instance active, car setup() est appelé avant d'analyser un autre composant options, donc This inside setup() se comporte complètement différemment de celui-ci dans les autres options. Une confusion peut survenir lorsque vous l'utilisez avec d'autres API facultatives dans setup().

Par conséquent, l'instance peut être obtenue en appelant la méthode getCurrentInstance. Cette méthode peut être utilisée directement après avoir introduit element-plus globalement

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

3. Une autre méthode consiste à utiliser 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. La façon la plus simple d'écrire dans l'API Composition est d'introduire à la demande

//helloworld.vue
import { inject, defineComponent,onMounted } from 'vue';
import { ElMessage } from 'element-plus'
export default  = defineComponent{
setup(omprops,content){
    onMounted(()=>{
      ElMessage.success('按需引入');
    })
}

vue en utilisant Element. Le composant message

est utilisé dans les fichiers vue

this.$message({
  message: "提示信息",
  type: "success"
})

est utilisé dans les fichiers js

ElementUI.Message({
  message: '提示信息',
  type: 'warning'
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!