uni-app全局引入js文件

js文件定义

对于js文件内方法的编写,可以采用以下两种形式,两种形式对应两种不同的文件引入:

javascript 复制代码
const showToast = {
	test: function() {
		console.log("测试2")
	}
}
export default showToast

引入: import showToast from './utils/toast'

javascript 复制代码
function test() {
	console.log("测试")
}

export {
	test
}

引入:import * as toast from './utils/toast.js'

全局引入

在main.js文件中引入定义的js文件,然后将其挂载到Vue的原型链上,可通过this.$toast 类似访问

Vue2与Vue3原型挂载有区别:

Vue2:

javascript 复制代码
import Vue from 'vue'
// 挂载到Vue原型
Vue.prototype.$toast = showToast
const app = new Vue({
  ...App
})
app.$mount()

Vue3:

javascript 复制代码
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  // 挂载Vue原型上
  app.config.globalProperties.$toast = showToast  
  app.use(store)
  return {
    app
  }
}

js方法调用:

javascript 复制代码
created() {
	this.$toast.test()
}
相关推荐
给月亮点灯|17 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
叫我阿柒啊17 小时前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
张迅之18 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
@CLoudbays_Martin1118 小时前
为什么动态视频业务内容不可以被CDN静态缓存?
java·运维·服务器·javascript·网络·python·php
软工的小白19 小时前
uniapp开发前端静态视频界面+如何将本地视频转换成网络地址
uni-app·音视频
蔗理苦19 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro20 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹20 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风20 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱20 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript