杂乱无章的vue小难点记录

props中以对象为接收参数时，设置默认值无效问题

在给子组件传值时，例如以下场景

props:{
	propObj:{
		type: Object,
		default(){
			return{
				userName:{
					type: String,
					default: 'user'
				},
				userImg:{//头像url地址
					type: String,
					default: 'http://www.xxxx.com'
				}
			}	
		}
	}
}

在这种情况下，一般人传值是这样的(这里只传入一个用户名，想使用默认的头像图片)
//比如以上的组件名叫 test.vue

<test :prop-obj="{ userName:'zhangsan' }"></test>

这样的产生的问题是：由于你传入了一整个对象，那么子组件中的propObj将被整个代替，默认值就不会生效了，除非你传入的是一个空对象，那么还不如不传！无意义！

解决

1. 解决办法1：将对象拆分成一个个独立的参数，在传入参数时一个个传入，没传入的参数将使用默认值（不推荐 参数多的时候有点麻烦）

props:{
	userName:{
		type: String,
		default: 'user'
	},
	userImg:{//头像url地址
		type: String,
		default: 'http://www.xxxx.com'
	}
}

2.解决办法2：使用Objec.assign()方法 es6新方法。在页面上直接使用computed属性直接使用就可以了
解释一下assign方法，这个方法有多个参数，将这么多个参数合并起来然后返回，例如以下，把propObj这个参数和第一个自定义对象的参数合并起来，如果后面一个参数中有与前面一个参数里的属性名相同，前一个中的属性值会被后一个参数的属性值替代。

props:{
	propObj:{
		type: Object,
		default:() => {}
	}
},
computed:{
	newPropObj(){
		return Object.assign({
			userName: 'user',
			userImg: 'http://www.xxx.com'
		},this.propObj)
	}
}