vue竊取道具類型的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)vue竊取道具類型的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

竊取道具類型

從子組件復(fù)制 prop 類型，只是為了在父組件中使用它們。但竊取這些道具類型比只是復(fù)制它們要好得多。

例如，我們Icon在這個(gè)組件中使用了一個(gè)組件：

<template>
  <div>
    <h3>{{ heading }}</h3>
    <Icon
      :type="iconType"
      :size="iconSize"
      :colour="iconColour"
    />
  </div>
</template>

為了讓它工作，我們需要添加正確的道具類型，從Icon組件中復(fù)制：\

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,
    },
  },
};

當(dāng)Icon組件的 prop 類型更新時(shí)，你肯定你會(huì)忘記回到這個(gè)組件并更新它們。隨著時(shí)間的推移，隨著該組件的 prop 類型開始偏離組件中的 prop 類型，將引入錯(cuò)誤Icon。

所以這就是為什么我們會(huì)竊取它們：

import Icon from './Icon';
export default {
  components: { Icon },
  props: {
    ...Icon.props,
    heading: {
      type: String,
      required: true,
    },
  },
};

除了在我們的示例中，我們?cè)诿總€(gè)道具名稱的開頭添加了“icon” 所以我們必須做一些額外的工作來實(shí)現(xiàn)這一點(diǎn)：

import Icon from './Icon';

const iconProps = {};

// Do some processing beforehand
Object.entries(Icon.props).forEach((key, val) => {
  iconProps[`icon${key[0].toUpperCase()}${key.substring(1)}`] = val;
});

export default {
  components: { Icon },
  props: {
    ...iconProps,
    heading: {
      type: String,
      required: true,
    },
  },
};

現(xiàn)在，如果Icon組件中的 prop 類型被修改，我們的組件將保持最新。

但是如果在Icon組件中添加或刪除了一個(gè) prop 類型呢？為了涵蓋這些情況，我們可以使用v-bind計(jì)算道具來保持動(dòng)態(tài)。

關(guān)于“vue竊取道具類型的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。