vue窃取道具类型的示例分析

vue窃取道具类型的示例分析

这篇文章将为大家详细讲解有关vue窃取道具类型的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

窃取道具类型

从子组件复制prop类型，只是为了在父组件中使用它们。但窃取这些道具类型比只是复制它们要好得多。

例如，我们Icon在这个组件中使用了一个组件：

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

为了让它工作，我们需要添加正确的道具类型，从Icon组件中复制：\

importIconfrom'./Icon';exportdefault{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类型更新时，你肯定你会忘记回到这个组件并更新它们。随着时间的推移，随着该组件的prop类型开始偏离组件中的prop类型，将引入错误Icon。

所以这就是为什么我们会窃取它们：

importIconfrom'./Icon';exportdefault{components:{Icon},props:{...Icon.props,heading:{type:String,required:true,},},};

除了在我们的示例中，我们在每个道具名称的开头添加了“icon”所以我们必须做一些额外的工作来实现这一点：

importIconfrom'./Icon';consticonProps={};//DosomeprocessingbeforehandObject.entries(Icon.props).forEach((key,val)=>{iconProps[`icon${key[0].toUpperCase()}${key.substring(1)}`]=val;});exportdefault{components:{Icon},props:{...iconProps,heading:{type:String,required:true,},},};

现在，如果Icon组件中的prop类型被修改，我们的组件将保持最新。

但是如果在Icon组件中添加或删除了一个prop类型呢？为了涵盖这些情况，我们可以使用v-bind计算道具来保持动态。

关于“vue窃取道具类型的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。