vue3全局方法和属性以及页面使用

我用的是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

• « 上一篇：springboot-redis连接超时问题
• » 下一篇：使用ES5,ES6实现链表数据结构