vue2.x利用Vue.prototype注册全局组件/方法

最新推荐文章于 2024-06-25 09:04:20 发布

Boale_H

最新推荐文章于 2024-06-25 09:04:20 发布

阅读量5k

点赞数

分类专栏： vue 文章标签： vue 前端

Edited by Boale_H （博哥的二进制世界）

本文链接：https://blog.csdn.net/Boale_H/article/details/118817660

版权

vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

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/>',
});