Cara menggunakan elemen-tambah untuk memanggil mesej dalam vue3
May 17, 2023 pm 03:52 PMvue3 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" })
untuk menggunakan
ElementUI.Message({ message: '提示信息', type: 'warning' });
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!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

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

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 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 mengeksport dan mencetak data

Cara menggunakan defineCustomElement untuk menentukan komponen dalam Vue3
