两种方式
第一种:使用provide和inject方式
第二种:使用全局挂载$message方式
第一种:
//main.ts
import { createApp } from 'vue';
import App from './App';
import Antd,{ message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css';const app = createApp(App);
app.use(Antd);
// 在定义app的原型上用provide进行挂载
app.provide('message', message);
// xxx.vue
import { inject } from 'vue';
const msg: any = inject('message');
const cancel = () => {msg.info('已取消');
};
第二种:
//main.ts
import { createApp } from 'vue';
import App from './App';
import Antd,{ message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css';const app = createApp(App);
app.use(Antd);
app.config.globalProperties.$message = message;
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const cancel = () => {proxy.$message.info('已取消');
};
关于message消息提示全局配置,vue3中第二种方式可能后续就会失效,建议使用官方推荐的第一种方式注入,provide和inject搭配简直无敌,使用vite+ts+vue3项目,unplugin-vue-components插件无法处理非组件模块,如 message、Modal、notification、Icon等,这种组件需要手动加载,都可以使用这种方式解决,祝大家好运,共勉!