一、在main.js同级目录建立一个common.js文件

// 全局变量
const globalObj = {}; // 定义公共变量
globalObj.name = '小明'; // 定义公共方法
globalObj.getAge = function (birthYear) {
return new Date().getFullYear() - birthYear;
}; export default globalObj

二、在main.js中import这个文件,然后放在Vue原型里

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Axios from 'axios' // 引入Axios
import common from './common' // 引入全局文件common.js Vue.prototype.$axios = Axios; // 全局变量
Vue.prototype.$common = common; // 全局变量
Vue.config.productionTip = false; new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');

三、在组件里使用

<template>
<div class="hello">
<h1>{{ msg }}</h1> <h3>{{$common.name}}</h3>
<p>{{myAge}}</p>
</div>
</template> <script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
computed: {
myAge: function () {
return this.$common.getAge(1994);
}
}
}
</script>

四、页面输出

五、思考

这种方式与Vuex起到的作用是一样的,比Vuex简单,但是Vuex就是比较专业了。不过还是有深层次的区别的,如下

大神回答:

Vue(八)全局变量和全局方法的更多相关文章

  1. vue定义全局变量和全局方法

    一.全局引入文件 1.先定义共用组件 common.vue <script type="text/javascript"> // 定义一些公共的属性和方法 const ...

  2. Adobe Edge Animate--关于全局变量和全局方法的定义

    Adobe Edge Animate--关于全局变量和全局方法的定义 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. BY:sonicxsxs 前文中有关音 ...

  3. vue组件挂载到全局方法

    在最近的项目中,使用了bootstrap-vue来开发,然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果,像alert.modal等组件每个页面引入就得重复引入,并不像eleme ...

  4. vue的全局方法和局部方法

    var infiniteScroll = require('vue-infinite-scroll') 等价写法 import infiniteScroll from 'vue-infinite-sc ...

  5. vue定义全局方法 调用其他组件的方法

    官网的写法  vue实例.$on就可以在根实例上定义全局方法 this.$root就是获取根实例  如果没有根实例 就表示当前实例 this.$root.$on 不需要.eventHub 不需要下面这 ...

  6. vue 自定义全局方法

    import {myfun} from '../static/js/test.js' //se6的正确写法export default {methods:{ diyfun:function () { ...

  7. vue 全局方法(单个和多个方法)

    参考: https://www.cnblogs.com/zhcBlog/p/9892883.html          https://blog.csdn.net/xuerwang/article/d ...

  8. 必备技能六、Vue中实现全局方法

    现实背景:很多时候我们会在全局调用一些方法. 实现方式两种:官网的实现use方法,然后你也可以用野路子直接在Vue.prototype上面定义. 先说野路子,因为其实野路子就是最根本的实现方式,官方的 ...

  9. 11 vue 自定义全局方法

    //global.js// 定义vue 全局方   // 定义vue 全局方法 建议自定义的全局方法加_ 以示区分 export default {   install(Vue, options =  ...

随机推荐

  1. iOS中的成员变量,实例变量,属性变量

    在ios第一版中: 我们为输出口同时声明了属性和底层实例变量,那时,属性是oc语言的一个新的机制,并且要求你必须声明与之对应的实例变量,例如: 注意:(这个是以前的用法) @interface MyV ...

  2. Android SnackBar:你值得拥有的信息提示控件

    概述: Snackbar提供了一个介于Toast和AlertDialog之间轻量级控件,它能够非常方便的提供消息的提示和动作反馈. 有时我们想这样一种控件.我们想他能够想Toast一样显示完毕便能够消 ...

  3. 浅析C++多重继承

    继承是面向对象的三大特征之中的一个. 可是对于继承的实现和使用方式,各种不同的面向对象语言有各自的观点.有些语言支持多重继承.而有些语言则仅仅支持单一继承. 多重继承的确引入了较大的复杂度.那么.在不 ...

  4. 数学之路-python计算实战(17)-机器视觉-滤波去噪(中值滤波)

    Blurs an image using the median filter. C++: void medianBlur(InputArray src, OutputArray dst, int ks ...

  5. zedboard 流水灯

    #include"xparameters.h"/* Peripheral parameters 外围的參数 */ #include"xgpio.h"/* GPI ...

  6. 万维网 WWW (World Wide Web)

    万维网 WWW (World Wide Web)并非某种特殊的计算机网络.万维网是一个大规模的.联机式的信息储藏所.万维网用链接的方法能非常方便地从因特网上的一个站点访问另一个站点,从而主动地按需获取 ...

  7. 深入理解7816(1)---- 关于F/D和etu【转】

    本文转载自:http://blog.sina.com.cn/s/blog_4df8400a0101gkss.html 深入理解7816(1)---- 关于F/D和etu 对于刚接触智能卡的工程师来说, ...

  8. 【POJ 2018】 Best Cow Fences

    [题目链接] http://poj.org/problem?id=2018 [算法] 二分平均值 检验时将每个数减去二分的值,求长度至少为L的子序列和的最大值,判断是否大于0 [代码] #includ ...

  9. 快速访问GitHub

    Github网站可以访问,但是由于网络代理商的原因,造成访问速度很慢. 本文采取方法:手动更改hosts Hosts是一个没有扩展名的系统文件,可以用记事本等工具打开,其作用就是将一些常用的网址域名与 ...

  10. E20170620-hm

    dump  n. 垃圾场; 仓库; 无秩序地累积;  vt. 倾倒; 倾销; 丢下,卸下; 摆脱,扔弃; terminate   vt. 结束; 使终结; 解雇; 到达终点站; adj. 结束的; d ...