位置: 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)(一只正在树上吃的苹果)

  • 一般纳税人劳务费税率是多少
  • 甲方给的工程奖项有哪些
  • 通行费发票勾选认证有多少就可以抵扣多少吗
  • 核定征收的小规模企业所得税B表收入总额含税吗
  • 股权计税成本如何计算?
  • 财务报税表格
  • 商业企业购进应税消费品可以抵扣吗
  • 会员卡收费怎么办理
  • 因产品不合格退回报废会计处理
  • 增值税开票税额交税差额怎么入账
  • 小规模纳税人可以抵扣进项税吗
  • 个体户没有三证合一,年检
  • 贴现的利息能不能取出来
  • 317房地产政策解读
  • 免抵退税应退税额
  • 换账套期初数怎么填
  • 小微企业季度销售额超过30万增值税
  • 出口货物免抵退申报明细录入怎么填
  • 建筑业甲供工程税率
  • 文化交流活动开展方案
  • 工资本月计提下月发放,个税如何计算做账
  • 企业打款认证计入什么科目
  • 对研发机构采购国产设备,全额退还增值税
  • 如何使用腾讯电子签维护自己的权益
  • mac软件打开提示意外退出
  • 利息收入和利息费用的区别
  • 公司车辆报废收入怎么入账
  • 21年最新cpu
  • php mysql pdo
  • 贷款利息不能抵扣进项税
  • php ado
  • 费用分摊的分录
  • 借款凭证会计分录是什么
  • 国税申报成功未缴税
  • 小规模纳税人养老保险怎么交
  • 劳务费800以上扣税标准
  • PHPCMS num 参数是什么意思?
  • 税率减按1.5%计算是什么意思
  • 预收账款可以用什么科目核算
  • 小规模纳税人的企业所得税税率
  • 卸车费属于什么费用
  • sql将一个表中的值赋给另一个表
  • 现汇跟承兑有什么区别
  • 税率变更协议怎么写
  • 电影院租金
  • 扣除未结话费是什么意思
  • 房租费待摊分录怎么做
  • 欠供应商货款会坐牢吗
  • 厂家给经销商的活动方案怎么写
  • 固定资产核算的内容主要包括
  • 存货非正常损失进项税额转出分录
  • 三年期定期存款利率怎么算
  • 不交社保如何在网上投诉
  • 会计原始分录包括什么
  • 损益类科目增加记哪方
  • 会计明细账怎么记
  • friend怎么用
  • sqlserver存储过程怎么查看
  • u盘装系统系统资料会被泄露吗
  • windows7个性化菜单
  • linux find . -name命令
  • vista 安装
  • linux 文件查看
  • linux如何打包tar.gz
  • window高级启动会怎么样
  • linux怎样使用
  • lrucache算法
  • unity音频导入设置
  • linux定时备份文件
  • node.js详解
  • 全面解析日本失去的十年
  • javascript获取浏览器代理设置
  • jquery easyui有哪些特点
  • HttpClient.execute() 阻塞问题
  • python动态绑定属性
  • jquery的哪个方法可以绑定mouseover
  • 国家税务总局,河北省税务局
  • 企业所得税一年算几次
  • 收回闲置土地使用权案例
  • 南京江宁汽车过户手续及费用
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设