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
   }
}

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐