vue2挂载全局方法/组件

Vue2 挂载全局方法/组件

• 思路

  全局类的功能一般都写在main.js页面；

• 需求

  把自己写的方法挂载到全局，这样每个组件都能使用了，比如下载方法

• 代码

  // common.js 文件
  	// 通用下载方法
  	export function download(url) {
  	  window.open(baseURL + url)
  	}
  	

  // main.js
  import { download, } from "@/utils/common";
  //分页组件
  import Pagination from "@/components/Pagination";
  
  
  // 全局方法挂载
  	//下载
  	Vue.prototype.download = download  
  	//全局成功、错误提示、普通提醒
  	Vue.prototype.msgSuccess = function (msg) {
  	  this.$message({ showClose: true, message: msg, type: "success" });
  	}
  	
  	Vue.prototype.msgError = function (msg) {
  	  this.$message({ showClose: true, message: msg, type: "error" });
  	}
  	
  	Vue.prototype.msgInfo = function (msg) {
  	  this.$message.info(msg);
  	}
  
  //全局组件挂载
  	Vue.component('Pagination', Pagination) // 自己封装的分页组件挂载到全局

• 使用

  // 全局方法的使用（在方法里直接调取就行）
  this.download(path)
  // 全局组件的使用(在模板template里直接用，全局组件不需要再单独引入了)
  <pagination :total="total" :page.sync="xxx" :limit.sync="xxx" @pagination="xxxonclick" />