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.
Passing a Number
We can pass in numbers to props.
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" :likes="post.likes"></blog-post>
</div>
<script>
const app = Vue.createApp({
data() {
return {
posts: [{ title: "hello world", author: "james", likes: 100 }]
};
}
});
app.component("blog-post", {
props: {
likes: Number
},
template: `<p>{{likes}}</p>`
});
app.mount("#app");
</script>
</body>
</html>
to create the blog-post component that takes the likes prop.
likes is a number, so we’ve to put the : before the likes to let us pass in an expression.
We can also pass in a number literal:
<blog-post :likes="100"></blog-post>
Passing a Boolean
To pass in a boolean, we can write:
<blog-post is-published></blog-post>
to pass in true to the is-published prop.
To pass in false , we’ve write out the whole expression:
<blog-post :is-published='false'></blog-post>
And we can pass in other expressions.
Passing an Array
We can pass in an array literal as a prop value.
So we can write:
<blog-post :comment-ids="[1, 2, 3]"></blog-post>
or we can write:
<blog-post :comment-ids="post.commentIds"></blog-post>
Passing an Object
Vue props can take objects.
So we can write:
<blog-post
:author="{
firstName: 'james',
lastName: 'smith'
}"
></blog-post>
We pass in an object to the author prop.
The : tells Vue that the object isn’t a string.
We can also pass in another expression that returns an object.
Passing the Properties of an Object
To pass in the properties of an object as props, we can use the v-bind without the argument.
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 v-for="post of posts" v-bind="post"></blog-post>
</div>
<script>
const app = Vue.createApp({
data() {
return {
posts: [{ title: "hello world", author: "james", likes: 100 }]
};
}
});
app.component("blog-post", {
props: {
title: String,
author: String,
likes: Number
},
template: `
<div>
<h1>{{title}}</h1>
<p>author: {{author}}</p>
<p>likes: {{likes}}</p>
</div>
`
});
app.mount("#app");
</script>
</body>
</html>
Then the properties of post will be passed into blog-post as prop values.
The property names are the prop names.
This is a shorthand for:
<!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"
:author="post.author"
:likes="post.likes"
></blog-post>
</div>
<script>
const app = Vue.createApp({
data() {
return {
posts: [{ title: "hello world", author: "james", likes: 100 }]
};
}
});
app.component("blog-post", {
props: {
title: String,
author: String,
likes: Number
},
template: `
<div>
<h1>{{title}}</h1>
<p>author: {{author}}</p>
<p>likes: {{likes}}</p>
</div>
`
});
app.mount("#app");
</script>
</body>
</html>
As we can see, it’s much longer and a lot more repetitive than the shorthand.
Conclusion
We can pass in various kinds of data easily with Vue components.
We just need to use v-bind or : for short.
