Vue 3 is the up and coming version of Vue front end framework.
It builds on the popularity and ease of use of Vue 2.
In this article, we’ll look at how to use props with Vue 3.
Props
Components can take props so that we can pass data from the parent component to it.
We can add props by defining the as an array of strings.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<blog-post title="hello world"></blog-post>
</div>
<script>
const app = Vue.createApp({});
app.component("blog-post", {
props: ["title"],
template: `<h1>{{title}}</h1>`
});
app.mount("#app");
</script>
</body>
</html>
We created a blog-post component with the props property to define which props we accept.
The array has the names of the props as strings.
Then we can pass in the props as we did with title .
Props are just attributes that can have any value we want.
Prop Types
To make passing props easier, we can check the data type of the prop.
This way, we’ll get an error if we pass in some value that we don’t expect.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<blog-post title="hello world"></blog-post>
</div>
<script>
const app = Vue.createApp({});
app.component("blog-post", {
props: {
title: String
},
template: `<h1>{{title}}</h1>`
});
app.mount("#app");
</script>
</body>
</html>
to set the title prop type to a string.
We can pass in any other constructor to set the valid type of a prop, like:
props: {
title: String,
likes: Number,
date: Date,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise
}
This also serves as good documentation of ur component.
Passing Static or Dynamic Props
Static props can be passed in with v-bind .
We did with the title prop in the previous example.
We have:
<blog-post title="hello world"></blog-post>
which has the title prop and it’s a static string.
If we want to pass in anything else, then we need to use v-bind or : for short.
For example, we can write:
<blog-post :title="post.title"></blog-post>
to pass in the title property of the post object.
We can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<blog-post v-for="post of posts" :title="post.title"></blog-post>
</div>
<script>
const app = Vue.createApp({
data() {
return {
posts: [
{ title: "hello world", author: "james" },
{ title: "good news", author: "james" },
{ title: "bad news", author: "james" }
]
};
}
});
app.component("blog-post", {
props: {
title: String
},
template: `<h1>{{title}}</h1>`
});
app.mount("#app");
</script>
</body>
</html>
to pass the title property of post to the title prop.
We can also pass in an expression.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<blog-post
v-for="post of posts"
:title="`${post.title} by ${post.author}`"
></blog-post>
</div>
<script>
const app = Vue.createApp({
data() {
return {
posts: [
{ title: "hello world", author: "james" },
{ title: "good news", author: "mary" },
{ title: "bad news", author: "jane" }
]
};
}
});
app.component("blog-post", {
props: {
title: String
},
template: `<h1>{{title}}</h1>`
});
app.mount("#app");
</script>
</body>
</html>
We created a string from the title and author properties and pass that in as the title prop’s value.
Conclusion
We can register props to let us pass values to child components.
Also, we can validate the data type with constructors as the values of the prop property.
