Vue 如何复制一个子组件的 Prop 类型在新的组件中使用

来看下下面这个使用场景，我们在这个组件中使用了一个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,
    },
  },
};