0
点赞
收藏
分享

微信扫一扫

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

女侠展昭 2021-09-19 阅读 50
日记本

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

相关推荐

0 条评论