Jadual Kandungan
vue3 menggunakan elemen-tambah untuk memanggil mesej
1 . Selepas pengenalan global elemen
2. Dalam Komposisi Kaedah persediaan dalam API lulus dalam dua pembolehubah
3 Kaedah lain adalah dengan menggunakan provide/inject
4 Adalah perlu untuk memperkenalkan
vue untuk menggunakan komponen mesej Elemen
Rumah hujung hadapan web View.js Cara menggunakan elemen-tambah untuk memanggil mesej dalam vue3

Cara menggunakan elemen-tambah untuk memanggil mesej dalam vue3

May 17, 2023 pm 03:52 PM
vue3 element-plus message

    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");
      }
    Salin selepas log masuk

    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("聪明");
        })
    }
    Salin selepas log masuk

    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')
    Salin selepas log masuk
    //helloworld.vue
    import { inject, defineComponent,onMounted } from 'vue';
    export default  = defineComponent{
    setup(omprops,content){
        onMounted(()=>{
          (inject('$message') as any).success("inject");
        })
    }
    Salin selepas log masuk

    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('按需引入');
        })
    }
    Salin selepas log masuk

    vue untuk menggunakan komponen mesej Elemen

    untuk menggunakan

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

    untuk menggunakan

    ElementUI.Message({
      message: '提示信息',
      type: 'warning'
    });
    Salin selepas log masuk
    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 Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

    Tag artikel panas

    Notepad++7.3.1

    Notepad++7.3.1

    Editor kod yang mudah digunakan dan percuma

    SublimeText3 versi Cina

    SublimeText3 versi Cina

    Versi Cina, sangat mudah digunakan

    Hantar Studio 13.0.1

    Hantar Studio 13.0.1

    Persekitaran pembangunan bersepadu PHP yang berkuasa

    Dreamweaver CS6

    Dreamweaver CS6

    Alat pembangunan web visual

    SublimeText3 versi Mac

    SublimeText3 versi Mac

    Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

    Cara melaksanakan kebolehsuntingan jadual dan pemilihan baris melalui vue dan Element-plus Cara melaksanakan kebolehsuntingan jadual dan pemilihan baris melalui vue dan Element-plus Jul 17, 2023 am 09:43 AM

    Cara melaksanakan kebolehsuntingan jadual dan pemilihan baris melalui vue dan Element-plus

    vue3+vite: Bagaimana untuk menyelesaikan ralat apabila menggunakan memerlukan untuk mengimport imej secara dinamik dalam src vue3+vite: Bagaimana untuk menyelesaikan ralat apabila menggunakan memerlukan untuk mengimport imej secara dinamik dalam src May 21, 2023 pm 03:16 PM

    vue3+vite: Bagaimana untuk menyelesaikan ralat apabila menggunakan memerlukan untuk mengimport imej secara dinamik dalam src

    Cara memuat semula sebahagian kandungan halaman dalam Vue3 Cara memuat semula sebahagian kandungan halaman dalam Vue3 May 26, 2023 pm 05:31 PM

    Cara memuat semula sebahagian kandungan halaman dalam Vue3

    Cara menggunakan vue dan Element-plus untuk melaksanakan pemberitahuan mesej dan gesaan pop timbul Cara menggunakan vue dan Element-plus untuk melaksanakan pemberitahuan mesej dan gesaan pop timbul Jul 17, 2023 pm 10:42 PM

    Cara menggunakan vue dan Element-plus untuk melaksanakan pemberitahuan mesej dan gesaan pop timbul

    Cara menggunakan vue dan Element-plus untuk melaksanakan fungsi muat naik dan memuat turun fail Cara menggunakan vue dan Element-plus untuk melaksanakan fungsi muat naik dan memuat turun fail Jul 18, 2023 pm 12:28 PM

    Cara menggunakan vue dan Element-plus untuk melaksanakan fungsi muat naik dan memuat turun fail

    Cara menggunakan vue dan Element-plus untuk melaksanakan borang langkah demi langkah dan pengesahan borang Cara menggunakan vue dan Element-plus untuk melaksanakan borang langkah demi langkah dan pengesahan borang Jul 17, 2023 pm 10:43 PM

    Cara menggunakan vue dan Element-plus untuk melaksanakan borang langkah demi langkah dan pengesahan borang

    Cara menggunakan vue dan Element-plus untuk mengeksport dan mencetak data Cara menggunakan vue dan Element-plus untuk mengeksport dan mencetak data Jul 18, 2023 am 09:13 AM

    Cara menggunakan vue dan Element-plus untuk mengeksport dan mencetak data

    Cara menggunakan defineCustomElement untuk menentukan komponen dalam Vue3 Cara menggunakan defineCustomElement untuk menentukan komponen dalam Vue3 May 28, 2023 am 11:29 AM

    Cara menggunakan defineCustomElement untuk menentukan komponen dalam Vue3

    See all articles