Rumah > Artikel > hujung hadapan web > Cara menggunakan elemen-tambah untuk memanggil mesej dalam vue3
Persekitaran: vue3+typescript+element-plus
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"); }
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("聪明"); }) }
//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"); }) }
//helloworld.vue import { inject, defineComponent,onMounted } from 'vue'; import { ElMessage } from 'element-plus' export default = defineComponent{ setup(omprops,content){ onMounted(()=>{ ElMessage.success('按需引入'); }) }
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!