【前端笔记】Vue + Element UI开发小技巧，持续更新。。。

1、组件传值时需要传递多个Props

在编写组件时，不可避免的要根据需要传递各种值给组件，如果一个个的绑定传递就会显得很麻烦。这时候就可以使用没有参数的v-bind进行绑定

const obj = {
	name: 'name',
	age: 17,
};
// 模板上这样使用
<ChildComp v-bind="obj"></ChildComp>
// 等于下面的写法
<ChildComp :name="obj.name" :age="obj.age"></ChildComp>
1
2
3
4
5
6
7
8

2、动态修改router中meta的值

可能有部分人会碰到一种需求是根据页面动态修改标题，普遍的方案是在router的meta配置中新增title属性，然后在路由后置守卫中给document.title赋值上meta中title的值。这里有个前提就是得提前知道标题是什么并且在meta中定义。那么怎么不提前定义然后动态修改呢？经过调研实现方案和查找相应方法文章，有一个可行方案出现了（有更好的欢迎分享）：

methods: {
	// 定义自定义监听函数
	watchRoute(meta, prop) {
		let value = meta[prop];
		// 自定义拦截器，监听对应属性
    	Object.defineProperty(meta, prop, {
    		get: () => {
        		return value;
			},
			set: (newValue) => {
				// dosomething
				value = newValue;
				this.title = newValue;
			},
		});
	}
},
created() {
	// watch无法监听到$route.meta的变化，自定义监听
	this.watchRoute(this.$route.meta, 'title');
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

根据源码，watch只能监听到浅层（也就是第一层）数据，无法做到监听其属性内属性的变化（设置deep也不行，亲测）。所以思路就是设置自定义拦截器，拦截需要监听的对象和属性（比如上面要拦截$route中meta并且监听其中的title属性），在其title值修改时做一些操作

适合场景：不能提前定义好值进行使用的情况（比如自己情况就是详情页封装的面包屑需要动态变更header的名称）

这块是根据自己实际情况分享的，可能有人觉得不会碰到这种奇怪需求，也可能有人会说：要动态值不放在meta中放路由上呗等等。这里分享出来至少以后碰到如$route.meta的值监听不到等类似问题能让大家有点印象，也可能让大家少走几步弯路

3、Element UI 阻止多个弹窗

在项目中会经常遇到页面同时出现多个提示弹窗，或者在校验时频繁触发。因为element的Message组件是会将消息堆叠起来，所以多少触发会显得很难看。于是有个这个需求，解决方法如下：

// 这里展示在接口响应拦截时使用
import { Message } from 'element-ui';

let messageBox = null;
function showMessage(message) {
	if (messageBox) {
		messageBox = null;
		// 重点，关闭所有弹窗实例
		messageBox.closeAll();
	}
	// 可以再封装一层，这里只做错误提示，写死为error
	messageBox = Message.error(message);
}

// 使用
axios.interceptors.response.use(response => {
    // ...
}, error => {
	showMessage(error.message);
    return Promise.reject(error);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22