vue添加全局方法属性

在使用vue构建一些大型项目的时候，会发现许多组件会共用到一些函数或常量，我们需要把它提取出来，每次需要的时候调用一次就可以了，避免每个组件都重新写再一篇的麻烦。这就需要写一个插件，在Vue.prototype上挂载我们需要的全局方法属性，比如Vue.prototype.const={}就是项目中的常量，Vue.prototype.utils={}就是项目的方法。下面就详细介绍下基于vue-cli的架子如何开发。

方法一

1、新建插件文件Plugins.js：

export default{
    install(Vue){
		// 形式一
    	Vue.prototype.$const={//常量
            URL:"http://www.fly63.com/",//项目请求接口的url
        }
        Vue.prototype.$utils={//全局方法
            getUrlParam:function(name) {//获取url中的参数
				var reg = new RegExp('(^|&?)' + name + '=([^&]*)(&|$)', 'i');
				var r = window.location.href.substr(1).match(reg);
				if (r != null) {
					return decodeURI(r[2]);
				}
				return undefined;
	    	}
       }
		
		// 形式二
		Object.defineProperty(Vue.prototype, '$confirm', {
			get() {
				let div = document.createElement('div')
				document.body.appendChild(div);
				return (message, confirmSure) => {
					const Constructor = Vue.extend(Confirm)
					const Instance = new Constructor({
						data() {
							return {
								message: message,
								show: true
							}
						},
						methods: {
							confirmSure: confirmSure    //确定方法
						}
					}).$mount(div);
				};
			}
		});
    }
}

2、main.js入口函数，配置如下：

1 2	import Plugins from './assets/js/Plugins.js'// 引入 Vue.use(Plugins) //通过全局方法 Vue.use() 使用插件

3、在组件中的使用：

created:function(){
	console.log(this.$const.URL)；//调用常量
        var name=this.$utils.getUrlParam('name');//调用方法
}

就怎么简单的完成我们的需求，插件通常会为 Vue 添加全局功能。插件的范围没有限制

一般有下面几种：

添加全局方法或者属性，如: vue-custom-element
添加全局资源：指令/过滤器/过渡等，如 vue-touch
通过全局 mixin 方法添加一些组件选项，如: vue-router
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router

方法二

1
2
3

Vue.prototype.changeData = function (){
  alert('执行成功');
}

1 2	//在所有组件里可调用函数 this.changeData();

开发插件

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

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

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}