H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

自己基于Vuejs写了一个插件

var MyPlugins = {};

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

module.exports = MyPlugins

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

回答:

一般是这样吧 给 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: '成功' })
  },
}

回答:

导入Vue即可:

import Vue from 'vue';

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

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

export default MyPlugins;

回答:

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

main.js引入
import global from “./components/global.vue”

Vue.prototype.GLOBAL = global;

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

回答:

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

回答:

如果是想在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方法

回答:

this.$root

回答:

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

本文地址:H5W3 » 如何在.vue文件中访问Vue全局变量

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址