vue2.x利用Vue.prototype注册全局方法/变量/组件
有些时候我们需要在vue项目的任意位置都能调用公共方法/变量，那么vue如何注册全局的方法/变量/组件呢？请看以下示例：
- 创建common.js（编写插件），插件内利用Vue.prototype全局挂载方法
import { Toast } from 'vant'; import echarts from 'echarts'; const install = (Vue) => { // toast提示,通过this.Toast调用 Vue.prototype.Toast = Toast; // echarts,通过this.$echarts调用 Vue.prototype.$echarts = echarts; // 获取url参数 Vue.prototype.$getUrlParam = (name, href) => { const _search = href ? href.split('?')[1] : window.location.search.substr(1); if (_search) { const _reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i'); const _regNext = _search.match(_reg); if (_regNext) { return decodeURI(_regNext[2]) || ''; } return ''; } return ''; };
- main.js（通过Vue.use注册刚刚编写的自定义插件），关于Vue.use的介绍，可以参考Vue.use的使用和基本原理
import Vue from 'vue'; import App from './App'; import router from './router'; import store from './store'; // 引入自定义插件 import common from './lib/common'; Vue.use(common); // 全局配置项 /* eslint-disable no-new */ // 把vue实例挂载在window.vm,方便使用vue的实例 window.vm = new Vue({ el: '#app', router, store, components: { App, }, template: '<App/>', });
- 在任意组件中使用刚刚通过Vue.prototype全局注册的方法，比如使用$getUrlParam方法，直接通过this.$getUrlParam即可调用
<template> <div class="page"> Vue.prototype全局注册的方法测试 </div> </template> <script> export default { name: 'Test', data() {}, created() { console.log(this.$getUrlParam('idCard')) }, }; </script>
- 在任意js文件中使用刚刚通过Vue.prototype全局注册的方法，比如使用$getUrlParam方法。因为我们已经在main.js中将vue实例挂载在window.vm,所以在js文件中，直接通过window.vm.$getUrlParam即可调用
console.log(window.vm.$getUrlParam('idCard'))
当然，如果不想通过编写组件然后Vue.use的方式引入全局方法，也可以直接在main.js通过Vue.prototype注册全局方法/变量/组件。
mian.js:
import Vue from 'vue'; import App from './App'; import router from './router'; import store from './store'; // 通过Vue.prototype注册全局方法/变量/组件 // toast提示,通过this.Toast调用 Vue.prototype.Toast = Toast; // echarts,通过this.$echarts调用 Vue.prototype.$echarts = echarts; // 获取url参数 Vue.prototype.$getUrlParam = (name, href) => { const _search = href ? href.split('?')[1] : window.location.search.substr(1); if (_search) { const _reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i'); const _regNext = _search.match(_reg); if (_regNext) { return decodeURI(_regNext[2]) || ''; } return ''; } return ''; }; // 把vue实例挂载在window.vm,方便使用vue的实例 window.vm = new Vue({ el: '#app', router, store, components: { App, }, template: '<App/>', });
需要注意的是，只有vue2.x支持Vue.prototype注册全局方法/变量/组件，vue3.x不再支持Vue.prototype
