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 --save

新建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);

所有的组件里就可以调用该函数。文章来源地址https://www.toymoban.com/news/detail-419274.html

this.test();

到了这里,关于vue如何定义:全局变量、全局方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3之app.config.globalProperties(定义全局变量)

    注意:如果全局属性与组件自己的属性冲突,组件自己的属性将具有更高的优先级。 1、创建一个文件(通过useGlobelProperties获取全局属性) 2、在main.ts中(配置全局属性) 3、任意组件中的使用 打印所得:   可以看到我们上面定义的name可以拿到,后续想要什么全局配置,可

    2024年02月15日
    浏览(39)
  • 【C/C++】C/C++ 如何定义全局变量

    在 C++ 中,可以在函数外部定义全局变量。全局变量是指在程序的任何地方都可以访问的变量,它的作用域是整个程序。 定义全局变量的语法格式如下: 其中,extern 用于声明全局变量,告诉编译器该变量是在其他源文件中定义的。在头文件中定义全局变量时,需要使

    2024年02月15日
    浏览(39)
  • 关于全局变量的定义

    全局变量,在A.c文件中定义的变量,在A.h中用extern声明一下即为全局变量,B.c文件想要调用的话只需要,包含A.h即可使用 如果不想让其他.c文件引用本文件中的变量,加上static即可。 static的作用: 1、在函数体修饰变量时,一个被声明为的static静态变量在这一函数被调

    2024年02月04日
    浏览(46)
  • 五、全局scss变量定义及使用

    定义 variable.scss 存放全局变量 配置 在vite.config.ts文件配置如下: @import \\\"./src/styles/variable.less\\\"; 后面的 ; 不要忘记,不然会报错 ! 使用 直接使用 使用暴露的变量名

    2024年02月19日
    浏览(40)
  • Unity 全局变量的定义和修改

    2024年02月02日
    浏览(65)
  • 汇编调用C语言定义的全局变量

    在threadx移植中,系统的systick通过了宏定义的方式定义,很难对接库函数的时钟频率,不太利于进行维护 所以在C文件中自己定义了一个systick_Div的变量,通过宏定义方式设定systick的时钟频率 在汇编下要加载这个systick分频系数 方法: 总结:对汇编指令需要进一步熟悉。

    2024年02月15日
    浏览(46)
  • FPGA设计Verilog基础之Verilog全局变量和局部变量定义

    注意:后续技术分享,第一时间更新,以及更多更及时的技术资讯和学习技术资料 ,将在公众号 CTO Plus 发布,请关注公众号: CTO Plus   在Verilog中,变量可以分为全局变量和局部变量两种类型。全局变量在整个模块中都可以使用,而局部变量只能在某个特定的代码块中使用。

    2024年02月15日
    浏览(39)
  • JavaScript保留字和预定义的全局变量及函数汇总

    保留字也称,每种语言中都有该语言本身规定的一些,这些都是该语言的语法实现基础,JavaScript中规定了一些标识符作为现行版本的或者将来版本中可能会用到的,所以当我们定义标识符时就不能使用这些了,下面介绍下JavaScript保留

    2024年01月16日
    浏览(61)
  • 海康Visionmaster-全局变量:全局变量关联流程中具体 模块结果的方法

    将视觉流程中模板匹配算法模块运行的结果数据:特征匹配点 X 关联全局变量 MatchResultX。 在流程运行的主界面中,按照下面 1,2,3,4 步骤操作,第一步选中算法模块,第二步择模块结果 Tab 页,第三步点击订阅数据图标,第 4 步选择全局变量。

    2024年02月05日
    浏览(84)
  • vue项目根据不同环境动态配置接口请求ip及全局变量(vue环境变量配置)

    在项目的开发过程中,我们常常会遇到根据不同的环境需要切换不同的ip的问题,例如在项目部署到测试服时需要将接口请求ip替换成测试服的ip,部署到正式服时又需要将接口请求ip替换成正式服对应的ip,有些公司还有预发环境等,这样在每次部署不同环境的项目前都需要先手

    2024年02月02日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包