Example Analysis of the types of props stolen by vue

This article will explain in detail the example analysis of the type of props stolen by vue. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Type of props stolen

Copy prop types from child components just to use them in the parent component. But stealing these prop types is much better than just copying them.

For example, we Icon uses a component in this component:

{{heading}}

To make it work, we need to add the correct prop type and copy it from the Icon component:\

Import Icon from'. / Icon' Export default {components: {Icon}, props: {iconType: {type: String, required: true,}, iconSize: {type: String, default: 'medium', validator: size = > [' small', 'medium',' large', 'xMuthlarge'] .colors (size), iconColour: {type: String Default: 'black',}, heading: {type: String, required: true,}

When the prop type of the Icon component is updated, you are sure you will forget to go back to the component and update them. Over time, as the prop type of the component begins to deviate from the prop type in the component, an error Icon will be introduced.

So that's why we steal them:

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

Except in our example, we added "icon" at the beginning of each prop name, so we had to do some extra work to do this:

Import Icon from'. / Icon';const iconProps = {}; / / Do some processing beforehandObject.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,}

Now, if the prop type in the Icon component is modified, our component will remain up to date.

But what if a prop type is added or removed from the Icon component? To cover these situations, we can use v-bind computing props to stay dynamic.

This is the end of this article on "sample Analysis of the types of props stolen by vue". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.