浅析子组件自定义属性问题

问题

• 最近学习过程中遇到一个有意思的事情，正好之前写项目遇到的事情。学习到了总结一下，下次遇到可以想起来

vue中注册了子组件之后，里面有很多地方要根据后台接口传过来的数据进行渲染，但是每个组件的数据后台都用一个对象包裹起来

分析

• 第一种方式：根据要传的数据定义每一个props对象，这样写的数据较多，父组件传入的时候也会写很多标签属性
• 这种方式可以适配多种对象 对象里面的属性名字可以不同，譬如 对象a的标题叫做a_title，对象b的标题叫做b_title我们可以不用管对象内的属性具体名字，直接传入

<script>
	export default {
		props: {
			title: {
				default: '',
				type: String
			},
			pic: {
				default: '',
				type: String
			},
			price: {
				default: 0,
				type: Number
			},
			state: {
				default: true,
				type: Boolean
			}
		}
	}
</script>

• 第二种方式：直接传入一个整体对象
• 这种方式适用范围较少适合只渲染同一种对象，对象内的属性名称都是一致的。适配性较差

<script>
	export default {
		props: {
			goods:{
				type: Object,
				default: {}
			}
		}
	}
</script>