来看下下面这个使用场景,我们在这个组件中使用了一个Icon组件
<template> <div> <h2>{{ heading }}</h2> <Icon :type="iconType" :size="iconSize" :colour="iconColour" /> </div> </template>
而我们要在该组件中定义每一个 Icon 组件的属性值,这样一来,Icon 组件的 Prop 属性值需要在这重新定义一遍。
import Icon from './Icon'; export default { components: { Icon }, props: { iconType: { type: String, required: true, }, iconSize: { type: String, default: 'medium', validator: size => [ 'small', 'medium', 'large', 'x-large' ].includes(size), }, iconColour: { type: String, default: 'black', }, heading: { type: String, required: true, }, }, };
带来的问题是,当 Icon 组件的 prop 类型被更新时,我们可能会忘记返回这个组件并更新它们。无形中会增加我们维护组件的成本。
因此,我们需要复制 Icon 组件的 prop 类型:
import Icon from './Icon'; export default { components: { Icon }, props: { ...Icon.props, heading: { type: String, required: true, }, }, };