位置: IT常识 - 正文

vue如何定义:全局变量、全局方法(vue3定义全局变量)

编辑:rootadmin
vue如何定义:全局变量、全局方法

推荐整理分享vue如何定义:全局变量、全局方法(vue3定义全局变量),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue中设置全局变量,vue如何定义全局变量,vue中定义全局变量的四种方法,vue中设置全局变量,vue如何定义全局组件,vue中定义全局变量的四种方法,vue怎么定义全局变量,怎么给vue定义全局的方法?,内容如对您有帮助,希望把文章链接给更多的朋友!

开发中会经常用到一些常用的变量和方法   例如ajax这种

一、给vue定义全局变量1.定义专用模块来配置全局变量

定义一个专用模块来配置全局变量,然后通过export暴露出去,在需要的组件引入global.vue

// 定义一些公共的属性和方法const httpUrl = 'http://test.com'// 暴露出这些属性export default { httpUrl,}

 引入及使用

<script> // 导入共用组件 import global from './global.vue' export default { data () { return { //使用 globalUrl: global.httpUrl } } }</script>2.通过全局变量挂载到Vue.prototype

同上,定义一个专用模块来配置全局变量,然后通过export暴露出去,在需要的组件引入global.vue

// 定义一些公共的属性和方法const httpUrl = 'http://test.com'// 暴露出这些属性export default { httpUrl,}

在main.js中引入并复制给vue

// 导入共用组件import global from './global.vue'Vue.prototype.global = global

组件调用

export default { data () { return { // 赋值使用, 可以使用this变量来访问 globalHttpUrl: this.global.httpUrl }}3.使用vuex

安装:

npm install vuex --savevue如何定义:全局变量、全局方法(vue3定义全局变量)

新建store.js文件

import Vue from 'vue'import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state:{ httpUrl:'http://test.com' } })

main.js中引入

import store from './store'new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' });

组件内调用

console.log(this.$store.state.httpUrl)二、给vue定义全局方法1.将方法挂载到 Vue.prototype 上面

简单的函数可以直接写在main.js文件里定义。

// 将方法挂载到vue原型上Vue.prototype.changeData = function (){ alert('执行成功');}

使用方法

//直接通过this运行函数,这里this是vue实例对象this.changeData();2. 利用全局混入 mixin

新建一个mixin.js文件

export default { data() { }, methods: { randomString(encode = 36, number = -8) { return Math.random() // 生成随机数字, .toString(encode) // 转化成36进制 .slice(number) } }}

// 在项目入口 main.js 里配置

import Vue from 'vue'import mixin from '@/mixin'Vue.mixin(mixin)

// 在组件中使用

export default { mounted() { this.randomString() }}3. 使用插件方式

plugin.js文件,文件位置可以放在跟main.js同一级,方便引用

exports.install = function (Vue, options) { Vue.prototype.test = function (){ console.log('test'); };};

main.js引入并使用。

import plugin from './plugin'Vue.use(plugin);

所有的组件里就可以调用该函数。

this.test();
本文链接地址:https://www.jiuchutong.com/zhishi/298861.html 转载请保留说明!

上一篇:睿智的目标检测——PyQt5搭建目标检测界面(睿智目标检测yolov8)

下一篇:OpenAI 官方api 阅读笔记(openapi官网)

  • 红米k50边框材质(红米k50屏幕是什么牌子)

    红米k50边框材质(红米k50屏幕是什么牌子)

  • 荣耀30pro是lcd屏的吗(荣耀30pro是lcd吗)

    荣耀30pro是lcd屏的吗(荣耀30pro是lcd吗)

  • 荣耀20Pro字体怎么改(荣耀20pro字体怎么调大小)

    荣耀20Pro字体怎么改(荣耀20pro字体怎么调大小)

  • 手机突然黑屏但是是开机状态(手机突然黑屏但是打电话会响)

    手机突然黑屏但是是开机状态(手机突然黑屏但是打电话会响)

  • vivo手机如何召唤小v(vivo手机如何召唤小度)

    vivo手机如何召唤小v(vivo手机如何召唤小度)

  • p30pro曲面屏眼睛易疲劳(p30pro曲面屏误触问题怎么解决)

    p30pro曲面屏眼睛易疲劳(p30pro曲面屏误触问题怎么解决)

  • 拼多多品牌店什么意思(拼多多 品牌 店铺)

    拼多多品牌店什么意思(拼多多 品牌 店铺)

  • 快手pro是什么意思啊(快手pb是什么意思)

    快手pro是什么意思啊(快手pb是什么意思)

  • 用身份证能查到手机号码吗(用身份证能查到开宾馆记录吗)

    用身份证能查到手机号码吗(用身份证能查到开宾馆记录吗)

  • 爱奇艺话费支付不了(爱奇艺话费支付会员为什么会系统异常)

    爱奇艺话费支付不了(爱奇艺话费支付会员为什么会系统异常)

  • 计算器数字键没反应了咋回事(计算器数字键没反应)

    计算器数字键没反应了咋回事(计算器数字键没反应)

  • oppo手机显示电池接触异常怎么解决(OPPO手机显示电量在哪里)

    oppo手机显示电池接触异常怎么解决(OPPO手机显示电量在哪里)

  • wlan助理怎么关闭(关闭wlan辅助)

    wlan助理怎么关闭(关闭wlan辅助)

  • 苹果笔记本需要贴膜吗(苹果笔记本需要清灰吗)

    苹果笔记本需要贴膜吗(苹果笔记本需要清灰吗)

  • 华为手机指纹解锁怎么重新设置(华为手机指纹解锁怎么设置)

    华为手机指纹解锁怎么重新设置(华为手机指纹解锁怎么设置)

  • 奇异果视频是爱奇艺吗(奇异果视频官网)

    奇异果视频是爱奇艺吗(奇异果视频官网)

  • 苹果实体店裸机什么意思(实体店里的苹果手机多少钱一个)

    苹果实体店裸机什么意思(实体店里的苹果手机多少钱一个)

  • 爱奇艺续费能退回来吗(爱奇艺续费能退吗怎么退)

    爱奇艺续费能退回来吗(爱奇艺续费能退吗怎么退)

  • iphone11运存多大(苹果11运存到底多大)

    iphone11运存多大(苹果11运存到底多大)

  • 创建用户账号并设置(创建用户user1)

    创建用户账号并设置(创建用户user1)

  • iphone打字震动在哪设置(iphone的打字震动)

    iphone打字震动在哪设置(iphone的打字震动)

  • 抖音商品橱窗佣金多少(抖音商品橱窗佣金多久可以提现)

    抖音商品橱窗佣金多少(抖音商品橱窗佣金多久可以提现)

  • 微信清空后找不到群聊(微信清空后找不到群怎么办)

    微信清空后找不到群聊(微信清空后找不到群怎么办)

  • 显示器hz什么意思(显示器中的hz是什么意思)

    显示器hz什么意思(显示器中的hz是什么意思)

  • 手机wps怎么设置段落(手机wps怎么设置首行缩进两个字符)

    手机wps怎么设置段落(手机wps怎么设置首行缩进两个字符)

  • 手机不散热会怎么样(手机不散热会影响电池吗)

    手机不散热会怎么样(手机不散热会影响电池吗)

  • 微信随拍功能在哪里(微信随拍在哪里看访客)

    微信随拍功能在哪里(微信随拍在哪里看访客)

  • 被称为下一代风口的AIGC到底是什么?(被称为下一代风华的是)

    被称为下一代风口的AIGC到底是什么?(被称为下一代风华的是)

  • 私车公用的税务风险
  • 个人出售普通住宅应当缴纳哪些税
  • 增值税留抵税额账务处理
  • 如何计算转让金融商品盘亏应交增值税
  • 配件销售过程中有什么注意事项
  • 咨询合同按什么交印花税
  • 购销合同需要盖合同章吗
  • 计提工会经费的基数是什么
  • 预付卡发票可以报销吗?
  • 个人可支配收入缩写
  • 劳务公司发放农民工工资的三种形式
  • 原材料暂估少了如何调整
  • 作为福利手段福利概念的三个条件是
  • 免抵退税的账务处理
  • 成品油购进数据未同步怎么办
  • 实报实销电话费
  • 企业所得税本季度可以弥补上季度亏损吗?
  • 广告公司广告费会计分录
  • 进项结构明细表怎么做
  • 工程发票的备注栏
  • 一般纳税人开普票税率是多少
  • 现金流净额为负值说明什么
  • 增值税的计税公式为
  • 减免税额期末需要结转吗
  • 领款凭证可以当收据吗
  • 实验设备折旧率
  • 年底买车险会便宜吗
  • 年底返利账务处理
  • 科研的成果形式
  • apache配置多个项目
  • 汇算清缴哪些表必填
  • 体积最小的u盘
  • php权限框架
  • 间接人工费用预算工时分配率将提高10%
  • 资本公积转增注册资本的条件
  • 跆拳道馆怎么盈利
  • php oracle 连接池
  • 服务器连接方式包括直接相连,间接连接
  • python htmltestrunner报告
  • 综合所得个税计算例题
  • 金蝶现金流量表不对怎么处理
  • 劳务派遣应如何签合同
  • 钢贸企业税收怎么算
  • 投资款未备注
  • 个人独资企业计提的各种准备金支出不得扣除
  • 计提坏账准备对企业的影响
  • 小规模纳税人应交增值税明细科目
  • sql server 2008 新建数据库
  • 房地产企业借款利息扣除标准
  • mysql大分页优化
  • 现金及现金等价物包括哪些科目
  • 检查记账凭证的内容包括
  • 公司交的物业费计入什么会计科目
  • 出口海运费222011
  • 加计减免其他收入怎么填
  • 费用报销票据规范要求
  • 水利基金和印花税会计分录
  • 应付款多付了怎么入账
  • 金蝶专业版怎么反过账
  • navicat连接教程
  • window系统怎么更新版本
  • Win10预览版镜像
  • Windows时间同步时出错该怎么解决?
  • 手动防止Ping攻击方法(无需防火墙)
  • os x10.11el capitan beta2下载地址
  • win7控制面板有哪些功能
  • 电脑开机后出现win7画面后一直黑屏
  • 在linux系统中,用来存放系统所需要的配置文件
  • 景深图片的3d显示器
  • jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
  • 简述android多线程编程的实现方式
  • 修改cmd中显示的用户名!
  • unity3d快速入门
  • javascript 类
  • jQuery中通过ajax调用webservice传递数组参数的问题实例详解
  • 深圳市税务局陈建新
  • 小规模纳税人可以开增值税专用发票吗
  • 广东税务待遇
  • 江苏省镇江市街道名称
  • 增值税申报表如何下载
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设