位置: 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官网)

  • 税种核定在电子版怎么查
  • 所得税季度预缴纳税申报表
  • 小规模纳税人500万以内免税
  • 增值税电子普票没有电子章有效吗
  • 企业视同销售的税法依据是什么?
  • 一般纳税人金税盘抵税会计分录
  • 成本结算怎么处理?
  • 小规模企业增值税减免政策
  • 不付加工费怎么办
  • 一般纳税人能不能开3个点的专票
  • 发票清单可以用a4
  • 减半征收附加税退回的分录
  • 以现金形式收到包装物押金
  • 会计核算过程中的错误分析
  • 已计提的固定资产减值准备累计金额
  • 资产评估收益法的前提条件
  • 年底计提费用和实际费用
  • 第三方汽车贷款平台有哪些
  • 医疗器械销售税负率是多少
  • 一般纳税人认定书
  • 免税单位无租使用纳税单位土地
  • 现金支出有哪些项目
  • 个体工商户清算报告
  • 费用开两次发票怎么入账?
  • 因质量问题被扣的货款销售方怎么做账
  • 公司交会费有什么用
  • 个人投资额是什么意思
  • linux系统中怎么创建目录
  • 押金收不回的会计分录
  • linux块设备驱动详解
  • 喝咖啡的好处和坏处 女性
  • php timeout
  • 公司未成立,发起人的责任
  • 收到债劵利息会减少吗
  • 最多显示2行文字怎么弄
  • 基于Java+SpringBoot+vue+element驾校管理系统设计和实现
  • gpt3 plug
  • 2023年我要实现的目标是
  • nor命令
  • python按行读入
  • 定额发票新旧版区别
  • 房租税务局代增值税发票 税点
  • python颜色代码有哪些
  • 天猫一般纳税人如何纳税
  • 应收票据应付票据合并抵消吗
  • 出纳记账凭证怎么写
  • 异地预缴印花税怎么做账
  • druid数据库连接池
  • 帝国cms适合建什么站
  • Simple Slug Translate 把WordPress固定链接自动翻译成英文
  • 厂区道路算建筑面积吗
  • 机械租赁费税率是多少
  • 建筑企业工程结算账务处理
  • 企业合并发生的法律服务费影响利润总额吗
  • 客户货款打到私人微信,删除公司电脑数据
  • 什么公司可以开普票
  • 企业的加油卡如何充值
  • 实收资本的会计编码
  • 长期待摊费用的最新账务处理
  • 最低标准买社保公积金个人缴纳多少钱
  • 品牌代理费计入什么科目
  • 期末结账后没有余额的科目
  • 营改增后不动产发票怎么开
  • 创办小企业如何起步
  • 无法将此电脑升级到最新版本的windows10
  • mac系统指令集
  • win7 64位系统重装后无线信号找不到的原因分析以及解决方法
  • unity的粒子系统在哪
  • js中如何实现数字相加
  • qat开发
  • javascript:void(0)的作用示例介绍
  • unity导入工程根本运行不了
  • Python 常用库
  • Struts2+jquery.form.js实现图片与文件上传的方法
  • 选择排序图解过程
  • 离线开票金额为0
  • 河北省国家税务局长简介
  • 税务局上下班路上能穿制服吗
  • 河北农信登录密码错误
  • 江西省税务局发票查询平台官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设