我用的是vue3+typescript
如果你没有用typescript,里面的 :any 你可以忽略掉,不用写,文件的ts后缀就换成js

main.ts里

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import addrouter from './router/routerlist' //单独的全局公共方法
import commonFun from './utils/publicFun' //一群的全局公共方法

let app = createApp(App);
app.config.globalProperties.addrouter = addrouter;//单独的全局公共方法,跟vue2用prototype不同

app //这里刚创建项目的时候是createApp(App),但上面挂载公共方法addrouter时createApp了,所以这不能再createApp,不然会出错
.use(store)
.use(router)
.use(commonFun) //挂载使用一群的全局公共方法
.mount('#app')

使用的页面

<script lang="ts">
import { defineComponent, getCurrentInstance } from 'vue';

export default defineComponent({
  name: 'Home',
  setup(props,context){
    //通过getCurrentInstance来获取全局方法,这个只能在setup里使用
    //const {ctx,proxy} = getCurrentInstance();//ctx开发环境可以用,线上环境不能用,所以直接用proxy
    const {proxy}:any = getCurrentInstance();
	proxy.fi('一群公共方法里的其中之一');
	proxy.scond('我来了,一群公共方法里的第二个');
	proxy.addrouter('单独全局方法');
  }
});
</script>

publicFun.ts文件里(一群公共方法)

//配置全局公共方法使用
const fi = (e:any) =>{
    console.log(e);
    console.log('fifififififififiifififififi')
}
const scond = (e:any) =>{
    console.log(e)
    console.log('二二二二二二二二二二二二二二')
}

export default {
    install:(app:any) =>{
        app.config.globalProperties.fi = fi;
        app.config.globalProperties.scond = scond;
    }
}

routerlist文件里(单独的全局方法)

const addrouter = (routerArr:any) => {
    console.log('????路由')
    console.log(routerArr);
}
export default addrouter

也可以这样加多个全局方法

//然后在main.ts里像单个全局方法那样注册就行
const request = {
	//1表示不用传token
	register(params:any) {
        console.log('你好啊')
	},
    www(params:any) {
        console.log('我勒个去')
	},
}
export default request
Logo

前往低代码交流专区

更多推荐