Maison >interface Web >Voir.js >Comment utiliser element-plus pour appeler un message dans vue3
Environnement : vue3+typescript+element-plus
element a ajouté la méthode globale $message
dans app.config. globalPropertiesIl peut donc être utilisé directement dans l'API d'options
mounted(){ (this as any).$message.success("this.$message"); }
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("聪明"); }) }
//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('按需引入'); }) }
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!