Deeply explore three different props usages in Vue

One of the core functions of Vue ispropsUse ofpropsIt is how we pass data from parent to child components in Vue.

But not allpropsIt's all the same。

We will mainly focus on popularizing 3 different sciences in this articleprops：

• templateprops（template props）
• Configurationprops（configuration props）
• statepropsor dataprops（state props/data props）.

We will learn more about these three different typesprops, see how they differ and when to use them.

1. Template props

Suppose we are building a Vue component. We want to pass certain text to it—such as button labels or prompt messages. This is the templatepropswhere it works.

templatepropsCan be made directly in the template of the component, but they are not suitable for methods or calculationsref, can and can only be used for templates.

Take a chestnut:

<template>
  <div>{{ message }}</div>
</template>

<script setup>
  defineProps({
    message: String
  })
</script>

This component usesmessage propAnd displaying it, it's so simple.

But the templatepropsThere is a unique feature that is similar toslot. We can always useslotReplace templateprops, thereby obtaining greater flexibility.

Convert to slot

Let's use a chestnutslotRefactor the above templateprops：

<template>
  <div><slot /></div>
</template>

Then we can use this component like this, instead ofmessageAs a templatepropsPassing:

<MyComponent>message Will be inserted slot</MyComponent>

slotAllows us to pass more than just text, we can also include HTML or other components. That's why the template ispropsConvert toslotIt may be a powerful reconstruction. This allows our components to be more flexible.

slotTemplate can be implementedpropsAll the functions are even more than that. We cannot use HTML or components as templatespropstransfer.

Template props vs slot

Know when to use templatespropsorslotIt can help us design better components.

If we need simplicity, templatepropsJust right. If flexibility is considered,slotIt's the right choice.

2. Configure props

ConfigurationpropsIt's all about changing the way components behave. They don't look like statepropsPass data like that. Instead, they adjust the appearance or function of the component.

Suppose we have oneButtonComponents. We want it to look different depending on where to use it.variantProperties can control their style:

<template>
  <button :class="`btn-${variant}`">Click me</button>
</template>

<script setup>
  defineProps({
    variant: {
      type: String,
      default: 'primary'
    }
  })
</script>

thisvariantProperties are configurationsprops. It changes the button's class according to the button's value. We can passprimary/secondary/danger, thereby changing the appearance of the button.

ConfigurationpropsVery universal, too. We can use them to toggle features, adjust styles, or modify component behavior. They are especially useful for creating reusable and highly adaptable components.

That's why they are the core part of the second reusability level: configuration.

3. Status props or data props

statepropsThe function is to pass dynamic data into components. They are the key to making components interactive and responsive to user input.

Suppose we have a list component that explicitly passes to its child elements:

<template>
  <ul>
    <li v-for="item in items" :key="">{{  }}</li>
  </ul>
</template>

<script setup>
  defineProps({
    items: Array
  })
</script>

itemsThe property is a stateprops. It contains the data that the component needs to render its list. whenitemsVue's responsive system ensures that components are updated automatically when changes occur.

statepropsIt is crucial to process data within a component. They work closely with Vue’s responsiveness to keep our UI in sync with the state of the app.

Evolution of State Management in Vue

Vue's method of state management has been keeping pace with the times for many years. Early versions heavily depend on statepropsand Vue's own responsive system.

Afterwards, solutions such as Vuex, Pinia, and combined APIs provide a more structured way to manage state. But statepropsStill a basic component of Vue, especially for passing data from parent to child components.

When to use each type of props

Now that we know these three props, we need to know their actual usage scenarios.

Select the correct typepropsDepends on what we need the component to perform. Here are some basic guidelines:

• usetemplatepropsPerforms simple data transfers that are displayed directly in the template. Especially if the data is static, not user data.
• When we need to adjust the behavior or appearance of components, please selectConfigurationprops. Usually these are boolean values ​​or enums.
• statepropsBest for dynamic data that varies over time. For example, anything stored in a database (or possibly stored in a database).

Summarize

propsis the core feature of Vue that enables components to communicate and stay dynamic.

Understand these three templatesprops, configurationpropsand statusprops, can help us design better components. Each type ofpropsAll have their place, depending on the requirements of the components.

This is the end of this article about in-depth exploration of three different props in Vue. For more information about three different props in Vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!