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()
}