Maison  >  Article  >  interface Web  >  Comment utiliser element-plus pour appeler un message dans vue3

Comment utiliser element-plus pour appeler un message dans vue3

WBOY
WBOYavant
2023-05-17 15:52:313084parcourir

    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!

    Déclaration:
    Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer