vue3挂载全局方法

比如某个js方法,项目很多地方都能用到,每次去重新写一遍太麻烦,放在一个js里面,每次去引入也懒得引,就可以挂载在全局上

1.创建tool.js文件,里面放常用的方法

const tools = {
  getCurrentTim(){
    const currentTime = new Date();
    const year = currentTime.getFullYear();
    const month = currentTime.getMonth() + 1; // 月份从0开始,因此需要加1
    const day = currentTime.getDate();
    const hours = currentTime.getHours();
    const minutes = currentTime.getMinutes();
    const seconds = currentTime.getSeconds();
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  },
  xxxx(){},
}
export default tools;

2.在main.js引入

import tools from './tools';

const app = createApp(App)
app.config.globalProperties.$TOOLS = tools;
...

3.vue页面使用

//从vue引入getCurrentInstance方法
 import { defineComponent, ref, reactive, watchEffect, getCurrentInstance, toRefs } from 'vue';
//定义setup 里面定义proxy
 setup(props, ctx) {
    const { proxy } = getCurrentInstance();
    // 设备类型
    const deviceType = 'sblxZyb';
    // 下拉列表
    let selectState = reactive({
      time: proxy.$TOOLS.getCurrentTim(),
      ASSET_UNIT_LIST: [],
 });

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue是一款流行的前端开发框架,它提供了一些便捷的工具和API,方便开发人员进行前端开发。其中,全局挂载Vue框架的一种重要的功能之一,它可以让我们在任何组件中都能够使用一些公共的方法或属性。 全局挂载方法的实现非常简单,只需要在Vue对象的原型上添加对应的方法即可。例如,我们可以在main.js文件中添加以下代码: ``` Vue.prototype.$myMethod = function() { console.log('这是一个全局方法'); }; ``` 上面的代码定义了一个名为$myMethod的方法,并将它添加到了Vue对象的原型上。这样,我们在任何组件中都可以通过this.$myMethod()来调用这个方法。 除了方法,我们还可以全局挂载一些属性。同样,只需要在Vue对象的原型上定义对应的属性即可。例如,我们可以在main.js文件中添加以下代码: ``` Vue.prototype.$myProperty = '这是一个全局属性'; ``` 上面的代码定义了一个名为$myProperty的属性,并将它添加到了Vue对象的原型上。这样,在任何组件中都可以通过this.$myProperty来访问这个属性。 需要注意的是,全局挂载方法和属性会影响整个应用程序,因此,我们要谨慎使用它们。如果过多地使用全局挂载方法和属性,可能会导致代码的可维护性降低。因此,我们应该在必要的时候才使用全局挂载方法和属性,保证代码的整体结构清晰、易于维护。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值