There is a very important thing in Vue, which is Props.
Props are used to pass data between Vue components, just like you move things from one box to another, from the parent component to the child component.
But do you know? There are also different types of Props, and their functions are different!
There are three main types:
- Template Props
- Configure Props
- Status Props (also called data Props)
Next, let’s take a closer look at these three Props to see what’s the difference between them and under what circumstances should they be used.
1. Template Props
Imagine that you are writing a Vue component, and you want to pass some text into it, such as the text of a button, or a prompt message. At this time, the template Props comes in handy!
Template Props is like a "placeholder", written directly in the component's template to display data. It cannot be used to control the methods or compute properties of a component, it can only display text or simple values.
Let's take a simple example:
<template>
<div>{{ message }}</div>
</template>
<script setup>
defineProps({
message: String
});
</script>This component receives a message props and displays it directly on the page.
Isn't it very simple?
However, there is a special thing about template Props, which is very similar to slots.
You can replace template Props with slots at any time so that your components can become more flexible.
Convert to slot
Our example above can be rewritten using slots:
<template> <div><slot /></div> </template>
Now, you no longer need to pass message as props, but use the component like this:
<MyComponent>Here's a message!</MyComponent>
Slots can pass more than just text, but also HTML code, and even other components. Therefore, converting template Props into slots will make your components more powerful and flexible.
However, it is more troublesome to convert from slots to template Props.
Slots can do everything Props can do, and more. But you can't pass HTML or components as props (at least not recommended).
Why bother?
Understanding when to use template Props and when to use slots can help you design better components.
Simple and easy to use, choose template Props; flexible and changeable, choose slots!
Next, let’s take a look at the configuration Props, and how it is different from template Props.
2. Configure Props
Configuring Props is like a "switch" that controls the behavior and appearance of components. They do not pass data directly, but are used to adjust the style or function of the component.
Suppose you have a Button component.
You want it to display different styles according to different usage scenarios, such as "main button", "secondary button" or "dangerous button". You can use variant props to control the style of the button:
<template>
<button :class="`btn-${variant}`">
Click me
</button>
</template>
<script setup>
defineProps({
variant: {
type: String,
default: 'primary'
}
});
</script>This variant props is a configuration Props.
It changes the style of the button according to the value of variant. You can pass "primary", "secondary" or "danger" to get different button styles (of course, you need to write these styles in advance).
Configuring Props is very flexible, you can use it to control the functionality of components, styling, or modify the behavior of components, making it ideal for creating reusable and customizable components.
This is why they are the core part of the second level of reusability: configuration.
Next, we will look at the state Props, which is used to manage data inside the component.
3. Status Props (or Data Props)
State Props are like a "data container" that passes dynamic data into components.
They are key to making components interactive and reacting to user input.
Imagine a list component that displays items:
<template>
<ul>
<li v-for="item in items" :key="">
{{ }}
</li>
</ul>
</template>
<script setup>
defineProps({
items: Array
});
</script>items props are a state props.
It contains the data that the component needs to render the list. Vue's reactive system automatically updates components when items change.
State Props is very important when processing data inside a component, and it works in conjunction with Vue's reactive system to ensure that the UI is consistent with the state of the application.
The evolution of Vue state management
Vue's way of handling state management has been evolving.
Early versions mainly relied on reactive systems with state Props and Vue.
Later, Vuex appeared, and later the Pinia and Composition APIs, which provided a more structured approach to state management. However, state Props remains the basic part of Vue, especially when passing data from parent to child components.
When to use what type of Props
Now that we have learned about three types of props, the next thing we need to learn is how to choose the right props type.
Which type of props to choose depends on what you want the component to do:
- Template Props:Used for simple data transfer, displayed directly in templates, especially when the data is static and not user data.
- Configure Props:When you need to adjust the behavior or appearance of a component, it is usually a boolean value or an enumeration.
- Status Props:Best for dynamic data, i.e. data that changes over time, such as data in a database.
Of course, if you want to learn more deeply, you can go to my course Reusable Components to see which will be explained in more detail in the course.
Summarize
Props is the core feature of Vue, allowing components to communicate and update dynamically.
Understanding three types of props—template Props, configuration Props, and status Props—can help you design better components. Each type has its application scenario, depending on your component requirements.
These concepts are the basis for understanding how to create more reusable components and are also crucial in the first few of the six levels of reusability.
The above is personal experience. I hope you can give you a reference and I hope you can support me more.