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

  • 五个如何在短期内快速提升淘宝店铺销量的方法(请举例说明如何进行短期生产分析)

    五个如何在短期内快速提升淘宝店铺销量的方法(请举例说明如何进行短期生产分析)

  • 苹果出现长方形透明框(苹果出现长方形框怎么取消)

    苹果出现长方形透明框(苹果出现长方形框怎么取消)

  • 剪映怎么涂鸦视频(剪映怎么涂鸦视频教程)

    剪映怎么涂鸦视频(剪映怎么涂鸦视频教程)

  • 手机怎么取消耳机模式(手机怎么取消耳机播放)

    手机怎么取消耳机模式(手机怎么取消耳机播放)

  • 华为p40空调遥控器怎么开(华为p40空调遥控器怎么设置定时关机)

    华为p40空调遥控器怎么开(华为p40空调遥控器怎么设置定时关机)

  • usb接口怎么转换插板(usb接口怎么转换网线口接线方法)

    usb接口怎么转换插板(usb接口怎么转换网线口接线方法)

  • 安装程序正在安装设备卡住了(安装程序正在安装设备2%卡住)

    安装程序正在安装设备卡住了(安装程序正在安装设备2%卡住)

  • 电话权限是什么意思(电话权限在哪打开)

    电话权限是什么意思(电话权限在哪打开)

  • ios获取新数据要不要关(苹果手机获取新数据有啥用)

    ios获取新数据要不要关(苹果手机获取新数据有啥用)

  • 华为p20语音助手怎么关闭(华为p20语音助手怎么唤醒答复)

    华为p20语音助手怎么关闭(华为p20语音助手怎么唤醒答复)

  • 联想小新和扬天区别(联想小新和扬天系列一体机哪个更好)

    联想小新和扬天区别(联想小新和扬天系列一体机哪个更好)

  • 笔记本没网怎么办(笔记本没网怎么开热点)

    笔记本没网怎么办(笔记本没网怎么开热点)

  • 红米手机下载不了微信怎么办(红米手机下载不了第三方软件)

    红米手机下载不了微信怎么办(红米手机下载不了第三方软件)

  • 苹果耳机airpods一代和二代的区别(苹果耳机airpods三代)

    苹果耳机airpods一代和二代的区别(苹果耳机airpods三代)

  • 微信消息显示在屏幕显示(微信消息显示在屏幕顶端)

    微信消息显示在屏幕显示(微信消息显示在屏幕顶端)

  • vivo nex3支持几倍变焦(vivo nex3多大)

    vivo nex3支持几倍变焦(vivo nex3多大)

  • word为什么不能编辑了(word文档为什么不能编辑)

    word为什么不能编辑了(word文档为什么不能编辑)

  • ac1200是不是千兆端口(ac1200和ac1900区别)

    ac1200是不是千兆端口(ac1200和ac1900区别)

  • airpods触碰点在哪(airpods 触点)

    airpods触碰点在哪(airpods 触点)

  • ipad怎么验证真假鉴别(ipad怎样验证真假)

    ipad怎么验证真假鉴别(ipad怎样验证真假)

  • iphone7电池多大(iphone7手机电池容量多少)

    iphone7电池多大(iphone7手机电池容量多少)

  • 无线反向充电什么意思(无线反向充电什么手机支持)

    无线反向充电什么意思(无线反向充电什么手机支持)

  • 一体机怎么连接wifi(一体机怎么连接音响)

    一体机怎么连接wifi(一体机怎么连接音响)

  • 苹果iPhone6s蓝牙连接汽车方法(苹果6手机蓝牙)

    苹果iPhone6s蓝牙连接汽车方法(苹果6手机蓝牙)

  • 一个简单的HTML网页(千与千寻电影) 大二学生网页设计与制作 电影主题网页制作(一个简单的html文档一般且必须包含哪些标签)

    一个简单的HTML网页(千与千寻电影) 大二学生网页设计与制作 电影主题网页制作(一个简单的html文档一般且必须包含哪些标签)

  • 销售软件税目
  • 进出口贸易公司需要什么资质
  • 农产品增值税加计扣除最新政策2021
  • 投资现金流是负的说明什么
  • 辞退福利全部计入当期
  • 小规模纳税人如何升级为一般纳税人
  • 怎么快速金蝶数据入库
  • 股东投资属于什么会计要素
  • 小规模纳税人是个体户吗
  • 税法免抵退计算例题
  • 高速公路通行费电子发票怎么打印
  • 物流企业差额征税
  • 专门从事研发的企业研发费用可以加计扣除吗
  • 劳服企业可以安差额税上税吗?
  • 增值税普票丢失发票联能重开吗
  • 每月认证多少发票怎么算
  • 一般纳税人能开3个点的专票吗
  • 公司变卖废纸也需要缴税
  • 联营与参股公司的关系
  • 水利建设基金按什么基数计算
  • 怎样申请退税费
  • 现金流量表的填制方法和构成
  • 递延所得税资产是什么
  • 支付销售产品的保险费计入什么科目
  • 当月计提当月缴纳的增值税还用结转吗
  • 多发的工资可以从下月扣除吗
  • 关于销售免税品的规定
  • 报税系统维护费怎么入账
  • touch id反应慢
  • 付员工经济补偿金计入工资总额吗
  • 长期股权投资引入新投资者账务处理
  • php实战
  • laravel访问路由方式
  • 递归 php
  • ctu指令
  • cd播放模式
  • 税费滞纳金计入增值税吗
  • 《开具红字增值税专用发票信息表》纸质
  • 如何禁用笔记本键盘触摸板
  • 材料采购会计科目怎么使用
  • 营改增后自建厂房抵扣
  • mysql5.7性能优化
  • 差旅费抵扣进项税额
  • 软件企业增值税计算
  • mysql数据查询慢
  • 银行对账单电脑上怎么导出
  • 补充医疗险要放多少钱
  • 小规模纳税人开专票税率是1%还是3%
  • 存货跌价准备确认
  • 库存商品怎么计提坏账
  • 企业年底亏损怎么结转
  • 应收账款客户少付款怎么记账
  • 用友软件中冲销凭证在哪
  • 2021年会计做账报税详细流程
  • 残保金不申报可以补缴吗
  • 记账凭证制作流程
  • mysql order by desc
  • win10快速启动什么意思
  • 资源管理器 windows
  • WebProxy.exe - WebProxy是什么进程
  • xp系统里的打印机怎么设置的和新7
  • OS X Yosemite系统下载失败怎么办?OS X 10.10下载错误解决方法
  • windows10使用说明
  • windows8截图保存在哪里
  • Metaio in Unity3d 教程--- 四:再谈谈图片扫描之tracking配置文件
  • ExtJS4如何给同一个formpanel不同的url
  • android属性大全
  • 浅谈自己对教育的理解
  • javascript教程完整版
  • cocos-2dx
  • python连接mysql实例分享
  • 举例说明jquery的功能
  • js创建对象的几种方式
  • django命令行
  • 美国税务制度
  • 广东省通用机打发票
  • 关于增值税纳税人的规定,下列说法正确的是
  • 电子税务局申领的发票怎么读入
  • 打税务局电话
  • 湖北航天金税盘服务器地址
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设