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

  • 微信接收的文件在手机上的位置(微信接收的文件怎么彻底删除)

    微信接收的文件在手机上的位置(微信接收的文件怎么彻底删除)

  • 窗口动画缩放0.5x 和1x有什么区别(窗口动画缩放0.5x有害吗)

    窗口动画缩放0.5x 和1x有什么区别(窗口动画缩放0.5x有害吗)

  • 荣耀x10电池容量是多少(荣耀x10换电池多少钱)

    荣耀x10电池容量是多少(荣耀x10换电池多少钱)

  • 移动流量七天包是什么(移动流量七天包怎么用)

    移动流量七天包是什么(移动流量七天包怎么用)

  • 苹果耳机充电盒充不进电(苹果耳机充电盒掉了怎么找回)

    苹果耳机充电盒充不进电(苹果耳机充电盒掉了怎么找回)

  • 抖音点赞后喜欢里没有(抖音点赞后喜欢那怎么变成零)

    抖音点赞后喜欢里没有(抖音点赞后喜欢那怎么变成零)

  • 芒果tv小屏会员是什么意思(芒果会员升级成全屏影视会员)

    芒果tv小屏会员是什么意思(芒果会员升级成全屏影视会员)

  • 单模光纤多模光纤的区别(单模光纤多模光纤价格)

    单模光纤多模光纤的区别(单模光纤多模光纤价格)

  • 华为授权体验店可以修手机吗(华为授权体验店是不是官方的)

    华为授权体验店可以修手机吗(华为授权体验店是不是官方的)

  • wifi怎么升级5g(wifi怎么升级5G)

    wifi怎么升级5g(wifi怎么升级5G)

  • hd6100相当于什么显卡(hd6610m相当于)

    hd6100相当于什么显卡(hd6610m相当于)

  • 拼多多没有拼小圈怎么办(拼多多没有拼小圈设置怎么办)

    拼多多没有拼小圈怎么办(拼多多没有拼小圈设置怎么办)

  • 知道群号怎么加入qq群(知道群号怎么加入群聊)

    知道群号怎么加入qq群(知道群号怎么加入群聊)

  • 京东学生认证安全吗(京东学生认证成功后,可以在哪里打开)

    京东学生认证安全吗(京东学生认证成功后,可以在哪里打开)

  • 苹果11演示机和正常机区别(苹果演示机和官换机哪个好)

    苹果11演示机和正常机区别(苹果演示机和官换机哪个好)

  • 红米k30和荣耀v30对比(红米k30和荣耀x40哪个好)

    红米k30和荣耀v30对比(红米k30和荣耀x40哪个好)

  • 笔记本运行慢如何解决(笔记本运行慢如何设置)

    笔记本运行慢如何解决(笔记本运行慢如何设置)

  • OPPO k5怎么在桌面新建文件夹(oppok5手机怎么设置桌面布局)

    OPPO k5怎么在桌面新建文件夹(oppok5手机怎么设置桌面布局)

  • 抖音动漫视频怎么发的(抖音动漫视频怎么赚钱)

    抖音动漫视频怎么发的(抖音动漫视频怎么赚钱)

  • 华为nemal00什么型号(华为ne0-al00)

    华为nemal00什么型号(华为ne0-al00)

  • 华为平板m5青春版功能介绍(华为平板m5青春版怎么分屏)

    华为平板m5青春版功能介绍(华为平板m5青春版怎么分屏)

  • qq音乐访问记录删了别人能看到吗(qq音乐访问记录只留最新一次)

    qq音乐访问记录删了别人能看到吗(qq音乐访问记录只留最新一次)

  • 196.168.01路由器怎么设置(168.191.01路由器)

    196.168.01路由器怎么设置(168.191.01路由器)

  • ipad新手使用指南(ipad新手使用指南2018)

    ipad新手使用指南(ipad新手使用指南2018)

  • cad属性在哪里打开(cad2020属性在哪里)

    cad属性在哪里打开(cad2020属性在哪里)

  • 最新win10密钥推荐 附激活工具+教程(2020最新win10密钥)

    最新win10密钥推荐 附激活工具+教程(2020最新win10密钥)

  • 出口退税哪些资料要留底
  • 关税完税价格计算消费税公式
  • 今年补交上年的对外捐赠(视同销售收入)的税怎么处理?
  • 研发费用可以计入哪个科目
  • 冲减营业税金及附加的分录
  • 一般纳税人当月生效次月生效有什么区别
  • 取得的进项发票当月不抵扣怎么做账
  • 专项用途财政资金纳税调整规则
  • 本年利润怎样结转未分配利润
  • 办公室零食采购台账
  • 内部损益表
  • 印花税一个月一报吗
  • 货款尚未收到用什么记账凭证
  • 月末计算各种税费表格模版
  • 个人独资的企业性质是什么
  • 物业收停车费要交房产税吗
  • 单位给员工买车怎么买
  • 当月没有认证的发票要勾选吗
  • 卷帘机适用税率
  • 农产品收购抵扣税额可以申请留抵退税
  • 开业好不好
  • 资产减值损失怎么计提
  • i7 5960X评测跑分参数介绍
  • 批量获取文件信息
  • 怎么快速关闭电脑屏幕快捷键
  • 进项已抵扣发票作废账务处理
  • 将原材料变成成品的过程
  • 向股东借款会计科目
  • 反射动态创建对象
  • 来料加工报废产品合同
  • 进口小汽车消费税率
  • 现金流量套期的分录
  • 广告性质的赞助支出可以在企业所得税前扣除吗
  • 贷款发生减值
  • vue数据实时更新
  • 存货报废如何账务处理
  • thinkphp5上传图片
  • uniapp传值
  • 结转本月完工产品的成本
  • 社保比例调整后多久生效
  • Python 人脸识别系统
  • es6特性及使用场景
  • SQLite教程(四):内置函数
  • sqlsever修改数据
  • 企业所得税汇算清缴会计分录
  • 购货发票属于是什么凭证
  • Table ‘xxx’ is marked as crashed and should be repaired 错误解决方法参考
  • 出售专利技术收增值税吗
  • 小规模纳税人开专票需要交税吗
  • 劳务费怎么做会计科目
  • 航空货运票据可以抵扣吗
  • 劳务公司在外地
  • 什么情况下需要缴纳
  • 用友怎么取消月结
  • 银行三证合一是哪三证
  • 上个月的发票未开具
  • 冲销管理费用怎么写凭证
  • 以前年度损益调整是什么意思
  • 单独运费怎么做账
  • 发行优先股的发行费用
  • 怎样申请开发票
  • 实收资本,资本公积,盈余公积
  • mysql5.7.27安装
  • windows10周年纪念版
  • winXP系统下qq不能视频聊天该怎么办?
  • 最小化安装centos7怎么装图形界面
  • jgcx是什么软件的文件
  • os x10.10.4beta6下载地址 os x10.10.4beta6官方下载网址
  • 更新win8
  • synergy linux
  • python中requests库session对象的妙用详解
  • ai人工智能python
  • Android自定义控件高级进阶与精彩实例
  • js基于什么
  • 国家税务局网上电子税务局官网天津
  • 企业所得税季度申报时间
  • 设计费需要交税吗
  • 特斯拉购车补贴2023苏州
  • 山东地税局网上办税平台
  • 灵活就业登记审核查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设