Rumah  >  Artikel  >  hujung hadapan web  >  Cara menggunakan elemen-tambah untuk memanggil mesej dalam vue3

Cara menggunakan elemen-tambah untuk memanggil mesej dalam vue3

WBOY
WBOYke hadapan
2023-05-17 15:52:313084semak imbas

    vue3 menggunakan elemen-tambah untuk memanggil mesej

    Persekitaran: vue3+typescript+element-plus

    1 . Selepas pengenalan global elemen

    telah menambah kaedah global $message

    dalam app.config.globalProperties, jadi ia boleh digunakan terus dalam pilihan API

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

    2. Dalam Komposisi Kaedah persediaan dalam API lulus dalam dua pembolehubah

    konteks menggantikan ini sebagai konteks, tetapi konteks hanya mempunyai emit, attr dan slot , masalah akan berlaku: Penerangan Rasmi dari tapak web:

    Persediaan dalaman(), ini tidak akan menjadi rujukan kepada contoh aktif, kerana persediaan() dipanggil sebelum menghuraikan pilihan komponen lain, jadi tingkah laku ini inside setup() Berbeza sepenuhnya daripada ini dalam pilihan lain. Kekeliruan boleh berlaku apabila anda menggunakannya dengan API pilihan lain dalam persediaan().

    Oleh itu, contoh boleh diperolehi dengan memanggil kaedah getCurrentInstance. Kaedah ini boleh digunakan secara terus selepas memperkenalkan elemen-tambah secara global

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

    3 Kaedah lain adalah dengan menggunakan 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 Adalah perlu untuk memperkenalkan

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

    vue untuk menggunakan komponen mesej Elemen

    untuk menggunakan

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

    untuk menggunakan

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

    Atas ialah kandungan terperinci Cara menggunakan elemen-tambah untuk memanggil mesej dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    Kenyataan:
    Artikel ini dikembalikan pada:yisu.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam