mpvue 全局变量的实现

1、html

1. 初始化建立完成项目以后,找到 src 目录下的 main.jsvue

例: 小程序

2. 在 main.js 最后将小程序的全局变量添加到 Vue 的原型上this

例: spa

此例小程序的全局方法 getApp() 添加一个全局变量 globalData 赋值给 Vue 原型 Vue.prototype 添加的 globalDataprototype

添加数据:code

此 main.js 页面添加:component

直接给 Vue 原型 Vue.prototype 赋值便可xml

在不一样页面添加:htm

能够在生命周期中使用 this 添加

例:

在不一样页面使用:

例:

重要:在使用时获取不到值的话,多是如下第二种方法最后说起的注意事项的缘由

 2、

使用 Vue 项目中定义全局变量的方式

1. 单独添加一个全局变量的模块(能够在任何地方)

在 components 组件文件夹中添加一个全局模块 global.vue

例:

2. 文件夹中添加 script,定义变量或直接导出,导出使用 export default

例:

3. 在须要的页面导入使用(两种使用方法)

。在 pages 中 .vue 页面文件使用

页面(.vue)中添加 script 使用 import from 导入

例:

能够在初始化(data)或生命周期中直接使用

例:

。。在 pages 中 .js 文件导入,在 .vue 页面使用

例: 

使用的仍是挂载在 Vue 实例上,仍是要注意赋值要在最后

在 .vue 页面中使用

注意:由于是在 pages 页面中的 js 文件引入,此时数据只是挂载在实例上,实例中是有值,

可是在刚进入页面时只能获取到 undefined,

因此初始化中和 created 是拿不到值的,只能在 mounted 以后在赋值

例: 

相关文章
相关标签/搜索