The Difference Between Props, Slots and Scoped Slots in Vue.js

Let’s see what is the best way to pass data between components

Photo by Bianca Ackermann on Unsplash

When I started using Vue, I just passed data between components through the props, deepening this framework I found that I could achieve the same result with slots.

Let’s understand the differences and the reasons for using props instead of slots and vice versa.

PROPS

They are attributes that are exposed to accept data from the parent component.

Let’s create a component MyMessage with props

<template>
  <div class="message">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: "MyMessage",
  props: {
    msg: String,
  },
};
</script>
<style scoped>
.message {
  color: red;
  text-decoration: underline;
}
</style>

In this way, we are saying that the component accepts a value called msg.