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

  • 小米长按识别怎么关闭(小米手机的长按识别)

    小米长按识别怎么关闭(小米手机的长按识别)

  • powerpoint主题怎么设置(powerpoint主题内容)

    powerpoint主题怎么设置(powerpoint主题内容)

  • 荣耀30pro有红外人脸识别功能吗(荣耀30pro有红外线功能吗)

    荣耀30pro有红外人脸识别功能吗(荣耀30pro有红外线功能吗)

  • 苹果xrhome键在哪(苹果8home键在哪)

    苹果xrhome键在哪(苹果8home键在哪)

  • 抖音挂淘宝店铺的要求(抖音挂淘宝店铺要求)

    抖音挂淘宝店铺的要求(抖音挂淘宝店铺要求)

  • 微信去哪儿怎么取消免密支付(去哪儿开通了微信免密怎么关闭)

    微信去哪儿怎么取消免密支付(去哪儿开通了微信免密怎么关闭)

  • app显示已退款没到账(为什么显示退款成功了我没收到钱)

    app显示已退款没到账(为什么显示退款成功了我没收到钱)

  • 显示器dvi无信号黑屏(显示器dvi无信号黑屏vga正常)

    显示器dvi无信号黑屏(显示器dvi无信号黑屏vga正常)

  • 快手没点赞怎么看浏览记录(快手没点赞怎么看谁看过作品)

    快手没点赞怎么看浏览记录(快手没点赞怎么看谁看过作品)

  • miui12的新功能(小米miui12新功能)

    miui12的新功能(小米miui12新功能)

  • 一个身份证可以绑定几个b站(一个身份证可以开几个淘宝店铺)

    一个身份证可以绑定几个b站(一个身份证可以开几个淘宝店铺)

  • 傲腾加固态会更快吗(固态加傲腾加机械)

    傲腾加固态会更快吗(固态加傲腾加机械)

  • 手机状态栏是什么(手机状态栏什么字最好看)

    手机状态栏是什么(手机状态栏什么字最好看)

  • 华为p40pro是3d人脸识别吗(p40pro有3d)

    华为p40pro是3d人脸识别吗(p40pro有3d)

  • 电脑下载的软件打不开怎么回事(电脑下载的软件在哪个位置)

    电脑下载的软件打不开怎么回事(电脑下载的软件在哪个位置)

  • nemtl00华为是什么型号(华为nem-tl00多少钱)

    nemtl00华为是什么型号(华为nem-tl00多少钱)

  • 进程在结构上由哪些组成(进程结构由三部分构成分别是)

    进程在结构上由哪些组成(进程结构由三部分构成分别是)

  • word怎么添加引用文献(word怎么添加引导线)

    word怎么添加引用文献(word怎么添加引导线)

  • 淘宝地址怎么改邮编(淘宝地址怎么改不了)

    淘宝地址怎么改邮编(淘宝地址怎么改不了)

  • 华为30和30pro区别(华为30好还是pro好)

    华为30和30pro区别(华为30好还是pro好)

  • 8p无线充电需要接收器吗(8p无线充电伤电池吗)

    8p无线充电需要接收器吗(8p无线充电伤电池吗)

  • 微光可以看本地视频吗(微光可以看本地电影吗)

    微光可以看本地视频吗(微光可以看本地电影吗)

  • 小米mix3跑马灯怎么设置(小米mix3闪光灯在哪设置)

    小米mix3跑马灯怎么设置(小米mix3闪光灯在哪设置)

  • 云计算的优势包括(云计算的优势包括降低投资成本)

    云计算的优势包括(云计算的优势包括降低投资成本)

  • 快捷方式都变成了某个应用的图标(快捷方式都变成pdf)

    快捷方式都变成了某个应用的图标(快捷方式都变成pdf)

  • 鸿蒙系统2.0怎么设置智闪卡自动切换?鸿蒙系统2.0设置智闪卡自动切换教程(鸿蒙系统2.0怎么升级3.0)

    鸿蒙系统2.0怎么设置智闪卡自动切换?鸿蒙系统2.0设置智闪卡自动切换教程(鸿蒙系统2.0怎么升级3.0)

  • 安克雷奇的秃鹰,阿拉斯加 (© Ron Niebrugge/Alamy)(安克雷奇的秃鹰怎么打)

    安克雷奇的秃鹰,阿拉斯加 (© Ron Niebrugge/Alamy)(安克雷奇的秃鹰怎么打)

  • 常见经典目标检测算法(经典目标检测算法)

    常见经典目标检测算法(经典目标检测算法)

  • 子公司把利润给母公司怎么做账
  • 财务制度怎么定
  • 个人劳务报酬所得汇算清缴
  • 普票为啥不能抵扣
  • 外销收入确认原则有哪些
  • 企业所得税季报可以更正吗
  • 收到银行转来的进账通知单,上月的销货款
  • 罚款收据与通用的区别
  • 公司报销费用发票怎么开
  • 金融服务利息
  • 专项拨款形成的固定资产递延收益
  • 旅行社差额征税增值税申报表怎么填
  • 什么是遗产税什么是税
  • 委托加工物资的消费税
  • 制造费用包括劳动保护费吗
  • 填报企业年报
  • 借款的印花税入哪个账户
  • 接受应税劳务的会计分录
  • 出口汇兑损益的会计分录
  • 企业注销个税怎样更正申报呢
  • 红魔3和一加7pro哪个好
  • 预缴附加税款会退税吗
  • 车辆违章罚款可以报销吗
  • 应对怯场的方法
  • 外购商誉是资产吗
  • 用php做计算
  • mac环境搭建
  • php实现截取中文字符
  • 提租补贴计入个税吗
  • 七姐妹悬崖是怎样形成
  • vue项目启动过程
  • elementui动态表单数据回显
  • vue生命周期图解
  • timedatectl命令用法
  • 微信自定义菜单在哪里
  • 股票收入需要交税
  • 一般纳税人餐饮服务可以抵扣吗
  • 未分配利润为负数怎么调整
  • 中央空调的维护和保养
  • 会计上弥补亏损
  • 一税两费减免政策
  • 电子承兑汇票支付信用查询
  • 工程施工企业收入1750万,利润怎么算
  • 农民专业合作社税收优惠政策
  • 预付账款怎么记账
  • 不得抵扣增值税的情形
  • 计提五险一金如何做分录
  • 确认收入未开发票
  • 收款收据可以用于财务报账吗
  • 购买固定资产的增值税计入成本吗
  • 流动比率与速动比率下降说明什么
  • 公司视同销售产品确认收入分录?
  • 材料抵扣进项税额
  • 国税定额发票有什么用
  • 全额抵扣怎么申报
  • 公司不报税会怎样法人有责任么
  • windowsxp无法定位程序输入点
  • 怎样设置禁
  • linux系统检测
  • mac怎么利用蓝牙传输文件
  • 苹果mac 最新系统
  • centos7 本地yum
  • 各种linux系统比较
  • win8 自动登录
  • win8怎么设置开机启动项
  • 安装perl模块
  • opengl编译
  • 微信小程序使用webview
  • nodejs性能对比
  • 迁移的项目
  • unity怎么加人
  • 浏览图片的软件叫什么
  • shell获取当前脚本的进程
  • html5 树形控件
  • python九大特点
  • javascript含义
  • 重庆电子税务局怎么绑定办税人员
  • 国税局国家公务员工资待遇
  • 潍坊市滨海经济开发区属于哪里
  • 天津本田天虹90摩托车库存
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设