vue3挂载全局方法

vue2.x的全局挂载方法为如何所示：import Vue from "vue";import Echarts from "echarts";Vue.prototype.$echarts = Echarts;new Vue({router,store,render: (h) => h(App),}).$mount("#app");使用的时候如下this.$echarts.xxx()vue3.

mschange

13694人浏览 · 2021-01-07 15:43:52

mschange · 2021-01-07 15:43:52 发布

vue2.x的全局挂载方法为如何所示：

import Vue from "vue";
import Echarts from "echarts";
Vue.prototype.$echarts = Echarts;
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

使用的时候如下

this.$echarts.xxx()

vue3.0全局挂载方法

以Ant Design Vue中的message为例：

在main.ts中代码如何

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import Antd, { message } from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
const app = createApp(App);

app.config.globalProperties.$message = message;

app.use(store)
  .use(router)
  .use(Antd)
app.mount('#app');

由app.config.globalProperties.$message = message;进行挂载

在页面中使用如下所示：

在js中引入

import { reactive, getCurrentInstance } from 'vue';

在用的地方使用

setup() {
   const { ctx } = getCurrentInstance();
   const login= () => {
      ctx.$message.info('登录成功')
   };
   return {
     login
   }
}