vue组件如何使用全局变量

定义全局变量

原理：

设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。

全局变量模块文件：

Global.vue文件：

使用方式1：

在需要的地方引用进全局变量模块文件，然后通过文件里面的变量名字获取全局变量参数值。

在text1.vue组件中使用：

使用方式2：

在程序入口的main.js文件里面，将上面那个Global.vue文件挂载到Vue.prototype。

import global_ from './components/Global'//引用文件

Vue.prototype.GLOBAL = global_//挂载到Vue实例上面

接着在整个项目中不需要再通过引用Global.vue模块文件，直接通过this就可以直接访问Global文件里面定义的全局变量。

text2.vue：

Vuex也可以设置全局变量：

通过vuex来存放全局变量，这里东西比较多，也相对复杂一些，有兴趣的小伙伴们，可自行查阅资料，折腾一波、

定义全局函数

原理

新建一个模块文件，然后在main.js里面通过Vue.prototype将函数挂载到Vue实例上面，通过this.函数名，来运行函数。

1. 在main.js里面直接写函数

简单的函数可以直接在main.js里面直接写

组件中调用：

2. 写一个模块文件，挂载到main.js上面。

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

main.js入口文件：

组件里面调用：

后话

上面就是如何定义全局变量 全局函数的内容了，这里的全局变量全局函数可以不局限于vue项目，vue-cli是用了webpack做模块化，其他模块化开发，定义全局变量、函数的套路基本上是差不多。

原理：

设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。

全局变量模块文件：

Global.vue文件：

<script>const serverSrc='www.baidu.com'const token='12345678'const hasEnter=falseconst userSite="中国钓鱼岛"  export default   {     userSite,//用户地址     token,//用户token身份     serverSrc,//服务器地址     hasEnter,//用户登录状态   } </script>

使用方式1：

在需要的地方引用进全局变量模块文件，然后通过文件里面的变量名字获取全局变量参数值。

在text1.vue组件中使用：

<template>    <div>{{ token }}</div></template><script>import global_ from '../../components/Global'//引用模块进来 export default {  name: 'text', data () {     return {          token:global_.token,//将全局变量赋值到data里面，也可以直接使用global_.token         }     } } </script><style scoped></style>

使用方式2：

在程序入口的main.js文件里面，将上面那个Global.vue文件挂载到Vue.prototype。

import global_ from './components/Global'//引用文件  Vue.prototype.GLOBAL = global_//挂载到Vue实例上面

接着在整个项目中不需要再通过引用Global.vue模块文件，直接通过this就可以直接访问Global文件里面定义的全局变量。

text2.vue：

<template>    <div>{{ token }}</div></template><script>export default {  name: 'text', data () {     return {          token:this.GLOBAL.token,//直接通过this访问全局变量。         }     } } </script><style scoped></style>

Vuex也可以设置全局变量

 

定义全局函数

原理

新建一个模块文件，然后在main.js里面通过Vue.prototype将函数挂载到Vue实例上面，通过this.函数名，来运行函数。

1. 在main.js里面直接写函数

简单的函数可以直接在main.js里面直接写

Vue.prototype.changeData = function (){//changeData是函数名   alert('执行成功')}

组件中调用：

this.changeData()//直接通过this运行函数

2. 写一个模块文件，挂载到main.js上面。

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

exports.install = function (Vue, options) {    Vue.prototype.text1 = function (){//全局函数1     alert('执行成功1')    }    Vue.prototype.text2 = function (){//全局函数2     alert('执行成功2')    }}

main.js入口文件：

import base from './base'//引用 Vue.use(base)//将全局函数当做插件来进行注册

组件里面调用：

this.text1()this.text2()

全局指令：

调用vue函数对象的directive方法，里面跟两个参数，一个指令名，一个处理函数

'my-directive'：自定义指令名

function(el, binding)：处理函数， el: 指令所在的标签对象，binding: 包含指令相关数据的容器对象

局部指令：

里面的数据和全局指令相同，只是语法不同

局部指令要定义在vue实例中

全局指令和局部指令的区别：

全局指令可供整个页面使用，而局部指令只作用于他定义的那个vue实例

将文本内容全部转换为大写字母

定义全局指令

创建一个vue实例

通过自定义指令将文本转换为大写渲染到页面中

定义局部指令

同上 *** 作

在非局部指令定义的实例中使用局部指令

在app2的实例中顶了一个局部指令，在app1中使用此指令，可以看到，页面并没有渲染出内容，所以，局部指令对本实例外的区域无效

---