位置: IT常识 - 正文

uniapp引入全局js,vue2/vue3不同方式引入(uniapp引入全局scss)

编辑:rootadmin
uniapp引入全局js,vue2/vue3不同方式引入

推荐整理分享uniapp引入全局js,vue2/vue3不同方式引入(uniapp引入全局scss),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uniapp引入jssdk,uniapp引入jssdk,uniapp全局变量四种实现方式,uniapp引入全局scss,uniapp全局引入组件,uniapp 引入js,uniapp 引入js,uniapp引入全局scss,内容如对您有帮助,希望把文章链接给更多的朋友!

Hi I’m Shendi

uniapp引入全局js,vue2/vue3不同方式引入

最近写小程序,个人开发,选用了 uni-app 进行开发

选用的 vue3 版本

vue2版引入全局js

因为我用的 vue3 版本,在这里踩了没学过vue3的坑,用vue2引入全局js的方式使用,导致undefined…

Vue2 版引入全局js的方法如下

将js放到项目内,一般放到自建的 common 文件夹下,且export在 main.js 中引入和挂载通过 this 调用

例如新建一个 util.js,放到 common/js 下

util.js内容如下

在 main.js 引入和挂载

import util from "@/common/js/util.js";Vue.prototype.$util = util;

uniapp引入全局js,vue2/vue3不同方式引入(uniapp引入全局scss)

在需要调用全局函数的页面中使用 this.$util 来调用全局函数。

export default { methods: { showMessage() { this.$util.showToast('Hello World') } }}vue3版引入全局js

文档很少,在这种基础问题上浪费了我大量时间…

有两种方式

依赖注入(provide/inject)

在Vue3中,可以使用 provide 和 inject 来实现全局引入JS文件

将js放到项目内,一般放到自建的 common 文件夹下,且export在 main.js 中使用 provide 将定义的变量或函数提供给其他组件使用 inject 来注入 provide 提供的变量或函数

例如新建一个 util.js,放到 common/js 下,内容同上方vue2一致

在主入口文件(如 main.js)中,引入全局JS文件,并使用 provide 方法将定义的变量或方法提供给所有组件:

uni-app的话,位置就在底部 const app = createSSRApp(App) 处使用就可以了,当时我使用错了app,用的最上方的,导致一直undefined

IDE会自动在上方引入 provide

import Vue, { provide } from 'vue'

在要使用的地方使用 inject

<script>import { inject } from "vue"export default {inject : ["util"],data() {return {}},onLoad() {},methods: {test() {this.util.showToast("123");}}}</script>直接赋值

在 main.js 内使用 app.config.globalProperties 来直接赋值,代码位置与上面那种方式一致

import { createSSRApp } from 'vue'import util from '@/common/js/util.js'export function createApp() { const app = createSSRApp(App) app.config.globalProperties.util = util; return { app }}

使用时直接 this 调用即可,一般命名会以 $ 开头

methods: { test() { this.util.showToast("123"); }}

END

本文链接地址:https://www.jiuchutong.com/zhishi/288022.html 转载请保留说明!

上一篇:马德拉岛的北海岸,葡萄牙 (© Hemis/Alamy)(马德拉群岛旅游攻略)

下一篇:一只正在树上吃东西的山地大猩猩,乌干达布恩迪国家公园 (© Robert Haasmann/Minden Pictures)(一只正在树上吃的苹果)

  • 怎么计算土地增值税的相关税金
  • 今年补交上年的对外捐赠(视同销售收入)的税怎么处理?
  • 个税在资产负债表中体现吗
  • 补贴收入如何入账
  • 开票系统怎么切换到数字账户
  • 其他收益科目代码
  • 税费误差财务怎么调整
  • 报销粘贴单怎么写
  • 坏账准备确认时怎么做账
  • 用于出口的进项可以抵扣吗
  • 印花税不计提是当月交当月吗
  • 未使用房子需要交物业费嘛
  • 留底税款
  • 来料加工账务处理方法
  • 土地租金及青苗赔偿款怎么做账?
  • 延递所得税资产减少
  • 公户没有进账,可以开发票吗?
  • 理论增值额的含义
  • 单位没车能用停车票不能用加油票吗?
  • 个体工商户如何给员工交社保
  • 豪华小汽车消费税
  • 借 其他应付款
  • 财务费用错记制造费用
  • 企业开票信息可以改吗
  • 技术合同的计税依据包括研究开发经费
  • 苹果14.5新功能
  • 独立账户负债核算内容
  • 工厂的绿化费进项税额
  • 紧急重新启动
  • 生产车间闲置的固定资产
  • 如何找装修公司
  • 企业分红的会计科目
  • 利息股息红利个税计算表
  • 固定资产抵债交不交增值税
  • 绣球花的叶子出现了斑点,这是怎么了?
  • 国有企业正常60岁退休到什么鉴字
  • 月球合影
  • 非居民纳税人可以做汇算清缴吗
  • DOMException: Failed to execute ‘insertBefore‘ on ‘Node‘: The node before which the new node ...报错
  • php开发项目
  • 增值税专用发票和普通发票的区别
  • 网页开票流程图解
  • php压缩文件怎么打开
  • mongodb数据删除
  • mysql开启事务语句
  • 累计折旧借贷方向表示什么意思
  • 发票一般会失效几天
  • 残保金需要计提吗怎样做分录
  • 母公司溢价收购子公司
  • 预付账款借方如何结转
  • 销售费用的主要科目
  • 材料采购成本的计算分录
  • 如何填写出售固定资产表
  • 原材料暂估的账务处理
  • 银行承兑汇票的承兑人
  • 关于废止有关排污收费规章和规范性文件的决定
  • mysql单表数据建议
  • 浅谈幼儿良好行为的培养论文
  • win10操作中心设置
  • windowsxp如何创建宽带连接
  • Win10 UWP红石版应用商店迎来更新:查找更新再换位置
  • win8显示隐藏文件夹
  • Linux如何使用clash
  • bootstrap table sum总数量统计实现方法
  • js正则用法
  • php九宫格
  • ubuntu重新安装网卡驱动
  • 怎样屏蔽锁屏广告
  • 移动move命令的操作步骤是
  • javascript中用于声明变量的关键字
  • window.parent与window.openner区别介绍
  • c++ 编程
  • node.js的express
  • android零基础
  • 安卓模拟器测试
  • javascript基于什么的语言
  • 国家税务总局千户集团
  • 单位为员工报销医药
  • 宁德市蕉城区地图全图最新
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设