uni-app全局引入js文件

js文件定义

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

const showToast = {
	test: function() {
		console.log("测试2")
	}
}
export default showToast

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

function test() {
	console.log("测试")
}

export {
	test
}

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

全局引入

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

Vue2与Vue3原型挂载有区别:

Vue2:

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

Vue3:

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

js方法调用:

created() {
	this.$toast.test()
}

你可能感兴趣的:(javascript,uni-app,前端)