如何在.vue文件中访问Vue全局变量

Question

自己基于Vuejs写了一个插件

var MyPlugins = {};

MyPlugins.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
    alert(1)
  }
}

module.exports = MyPlugins

在Vue.use以后myGlobalMethod方法是挂载在Vue对象上的，那怎么才能在.vue文件中访问到这个方法呢？或者怎么在.vue文件中访问到Vue对象？

Answer 1

一般是这样吧 给 Vue.prototype 添加实例方法
请看官网文档：http://cn.vuejs.org/v2/guide/...

plugin.js

export default {
  install(Vue, options) {
    Vue.prototype.$myGlobalMethod = opts => {
      window.alert(JSON.stringify(opts))
    }
  }
}

main.js

import Vue from 'vue'
import MyPlugins from 'plugin.js'
Vue.use(MyPlugins)

App.vue

export default {
  name: 'app',
  mounted() {
    this.$myGlobalMethod({ code: 0, status: 'success', msg: '成功' })
  },
}

Answer 2

导入Vue即可：

import Vue from 'vue';

export default {
  mounted(){
    Vue.myGlobalMethod();
  }
}

另外，把你的插件中最后一行代码修改为：

export default MyPlugins;

Answer 3

定义一个global.vue，作为全局变量的文件，里面写全局变量

main.js引入
import global from "./components/global.vue"

Vue.prototype.GLOBAL = global;

其他地方就可以用this.来引用

Answer 4

使用main.js引入，全局配置路由导入，进行模块式开发~

Answer 5

如果是想在vue实例和组件中都添加某个方法或者属性可以考虑用插件机制来实现vue实例和组件共享属性和方法

var MyPlugins = {};
MyPlugins.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.mixin({
    methods:{
        myGlobalMethod(){}
    }
  })
}
module.exports = MyPlugins

// 全局注册自己的插件
Vue.use(MyPlugins);

插件机制是支持mixin混入，只要使用了插件，所有的vue实例，组件都会拥有插件中混入的方法，
这时候在vue实例，或者组件，.vue组件都可以调用myGlobalMethod方法

Answer 6

this.$root

Answer 7

1. 如果只是添加全局方法 可以用Vue.prototype.fn = function() {} 页面中用this.fn()使用
2. 如果添加全局变量 假如有a b 两个页面 可以单独写一个param.js文件 文件内部代码 export default { param： ''} a b两个页面分别引入 （不过这种方法有一个缺点 手动刷新后 参数消失）