当前位置: 首页 > article >正文

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

http://www.kler.cn/a/291767.html

相关文章:

  • 在 Spring Boot 3 中实现基于角色的访问控制
  • 202412月最新植物大战僵尸杂交版【V3.0.1】更新内容与下载
  • 【MAC】深入浅出 Homebrew 下 Nginx 的安装与配置指南
  • C++版实用时间戳类(Timestamp)
  • DataOps驱动数据集成创新:Apache DolphinScheduler SeaTunnel on Amazon Web Services
  • CNN、RNN、LSTM和Transformer之间的区别和联系
  • .Net 6.0--通用帮助类--FileHelper
  • 打卡57天------图论(两种算法)
  • Leetcode刷题笔记:多数元素(摩尔投票算法最通俗的理解)
  • 设计模式学习-责任链模式
  • 结构型设计模式--装饰模式
  • 【Spring Boot-Spring Boot配置文件分类】
  • 前端面试题总结(HTML篇和CSS篇)
  • Spring Boot应用中集成与使用多数据源
  • 【ES常用查询操作】
  • Java项目: 基于SpringBoot+mysql高校心理教育辅导管理系统分前后台(含源码+数据库+开题报告+毕业论文)
  • sql日期函数
  • C++/Qt 多媒体(续五)
  • web前端基础笔记(六)
  • [数据集][目标检测]轮胎缺陷检测数据集VOC+YOLO格式2154张4类别
  • 2024 年高教社杯全国大学生数学建模竞赛题目【A/B/C/D/E题】完整思路
  • 爬虫使用代理IP返回405:原因及解决方法
  • 第十八章 rust字符串String详解
  • btrace 开源!基于 Systrace 高性能 Trace 工具
  • SprinBoot+Vue二手回收微信小程序的设计与实现
  • 网络编程day01(IP地址、Socket、端口号)