vue2 深入了解组件之自定义事件

一、今天查看文档，我发现介绍过于简单（自己水平有限），总结一下，以供查阅。

1.官网给出的是文字说明如下：

2.自己理解之后的总结：

2.1 自定义事件步骤

    1.子组件中 ，元素的点击事件 触发 $emit(methodName,params);
    2. 父组件中， 创建子组件标签，使用 @methodName 触发事件。
    ps:子组件点击事件，可以传递到父组件上，并携带参数params

二、 我的理解

1. 方法名字 methodName是需要区分大小写<完全匹配监听这个事件所用的名称>。
2. 父组件中， 创建子组件标签，使用 @methodName 触发事件，就像是在子组件点击，父组件响应点击方法。

*********************************分割线

图片压缩的js方法

//图片压缩
export const compressImg = file => {
 var fileSize = parseFloat(parseInt(file["size"]) / 1024 / 1024).toFixed(2);
 var read = new FileReader();
 read.readAsDataURL(file);
 var that = this;
 return new Promise(function(resolve, reject) {
 	read.onload = function(e) {
 		var img = new Image();
 		img.src = e.target.result;
 		img.onload = function() {
 			let imgwidth = img.width,
 				imgheight = img.height;
 			let nw = 0,
 				nh = 0;
 			if (fileSize < 1) {
 				if (imgheight > imgwidth) {
 					nh = 600;
 					nw = Math.floor((nh * imgwidth) / imgheight);
 				} else {
 					nw = 600;
 					nh = Math.floor((nw * imgheight) / imgwidth);
 				}
 			} else if (fileSize > 1 && fileSize < 2) {
 				if (imgheight > imgwidth) {
 					nh = 800;
 					nw = Math.floor((nh * imgwidth) / imgheight);
 				} else {
 					nw = 800;
 					nh = Math.floor((nw * imgheight) / imgwidth);
 				}
 			} else {
 				if (imgheight > imgwidth) {
 					nh = 1000;
 					nw = Math.floor((nh * imgwidth) / imgheight);
 				} else {
 					nw = 1000;
 					nh = Math.floor((nw * imgheight) / imgwidth);
 				}
 			}
 			// 默认按比例压缩
 			var w = nw;
 			var h = nh;
 			// 默认按比例压缩				// var w = this.width				// var h = this.height
 			// 生成canvas
 			var canvas = document.createElement("canvas");
 			var ctx = canvas.getContext("2d");
 			var base64;
 			// 创建属性节点
 			canvas.setAttribute("width", w);
 			canvas.setAttribute("height", h);
 			ctx.drawImage(this, 0, 0, w, h);
 			if (fileSize <= 0.2) {
 				base64 = canvas.toDataURL(file["type"], 1); 
 			} else if (fileSize > 0.2 && fileSize <= 0.5) {
 				base64 = canvas.toDataURL(file["type"], 0.9);  
 			} else if (fileSize > 0.5 && fileSize <= 1) {
 				base64 = canvas.toDataURL(file["type"], 0.6);  
 			} else if (fileSize > 1 && fileSize <=1.5) {
 				base64 = canvas.toDataURL(file["type"], 0.3);
 			}  else if (fileSize > 1.5 && fileSize <=2) {
 				base64 = canvas.toDataURL(file["type"], 0.4);
 			} 				
 			else {
 				base64 = canvas.toDataURL(file["type"], 0.2);
 			}
 			// 回调函数返回file的值（将base64编码转成file）
 			// 1.先转为 blob格式  file.content是此文件的base64格式
 			var blob = dataURLtoBlob(base64);
 			var fileName = file.name;
 			// 2，在转为 file类型
 			var file_ys = blobToFile(blob, fileName);
 			resolve(file_ys);
 		};
 	};
 });
};

export const dataURLtoBlob = dataurl => {
 var arr = dataurl.split(","),
 	mime = arr[0].match(/:(.*?);/)[1],
 	bstr = atob(arr[1]),
 	n = bstr.length,
 	u8arr = new Uint8Array(n);
 while (n--) {
 	u8arr[n] = bstr.charCodeAt(n);
 }
 return new Blob([u8arr], { type: mime });
};

export const blobToFile = (theBlob, fileName) => {
 theBlob.lastModifiedDate = new Date(); // 文件最后的修改日期
 theBlob.name = fileName; // 文件名
 return new File([theBlob], fileName, {
 	type: theBlob.type,
 	lastModified: Date.now()
 });
};