vue3全局方法和属性以及页面使用
我用的是vue3+typescriptmain.ts里import { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'import addrouter from './router/routerlist' //单独的全局公共方法impo
·
我用的是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
更多推荐
已为社区贡献3条内容
所有评论(0)