The Difference Between Props, Slots and Scoped Slots in Vue.js
Let’s see what is the best way to pass data between components
--
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
.
Now when we use this component we are able to pass a value through an attribute
<template>
<my-message msg="NotOnlyCSS is awesome!" />
</template><script>
import MyMessage from "./components/MyMessage.vue";export default {
name: "App",
components: {
MyMessage,
},
};
</script>
You can see the demo and play with props here on codesandbox.
Well I think it is now clear how the props work.
SLOTS
They allow you to compose component, also with HTML code.
Let’s create a component MyMessage
with slots
<template>
<div class="message">
<slot />
</div>
</template><script>
export default {
name: "MyMessage",
};
</script><style scoped>
.message {
color: red;
text-decoration: underline;
}
</style>