vue2挂载全局方法/组件

禾苗种树2024-01-19 13:38

Vue2 挂载全局方法/组件

思路

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

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

代码

js 复制代码

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

js 复制代码

// 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) // 自己封装的分页组件挂载到全局

使用

js 复制代码

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