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.
One-Way Data Flow
Props have a one way downward binding between the parent and child component.
When the parent property updates, then the updates are passed into the child via props.
This prevents child components from accidentally mutating the parent’s state.
And this makes our app easier to understand.
We should never mutate props.
If we need to change their value, then we should assign them to a new property first.
For instance, if we need to change the value of an initial value that’s set with the prop’s value, then we should assign that to a state first.
So we should write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<counter :initial-count="5"></counter>
</div>
<script>
const app = Vue.createApp({}); app.component("counter", {
props: ["initialCount"],
data() {
return {
count: this.initialCount
};
},
template: `
<div>
<button @click='count++'>increment</button>
<p>{{count}}</p>
</div>
`
}); app.mount("#app");
</script>
</body>
</html>
We have the initialCount prop that we use to set the initial value of count state in the counter component.
Then we can do whatever we like with it.
If the value needs to be transformed, then we can put it in as a computed property.
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">
<counter :initial-count="5"></counter>
</div>
<script>
const app = Vue.createApp({});
app.component("counter", {
props: ["initialCount"],
data() {
return {
count: this.initialCount
};
},
computed: {
doubleCount() {
return this.count * 2;
}
},
template: `
<div>
<button @click='count++'>increment</button>
<p>{{doubleCount}}</p>
</div>
`
}); app.mount("#app");
</script>
</body>
</html>
We have the initial-count prop which is transformed to doubleCount by returning this.count * 2 .
Now we don’t have to do anything with the prop value itself.
And we just change the state to what we want within the data method and the computed property in the counter component.
Prop Validation
We can validate props by check its data type and more.
We set the the props property’s value to a constructor.
Or we can validate it with a function.
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"></blog-post>
</div>
<script>
const app = Vue.createApp({
data() {
return {
posts: [{ author: "james", likes: 100 }]
};
}
});
app.component("blog-post", {
props: {
title: {
type: String,
default: "default title"
}
},
template: `<p>{{title}}</p>`
});
app.mount("#app");
</script>
</body>
</html>
Then we get the ‘default title’ text displayed since we never passed in value to the title prop.
default has the default value.
validator has the validator function for props.
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" type="news"></blog-post>
</div>
<script>
const app = Vue.createApp({
data() {
return {
posts: [{ author: "james", likes: 100 }]
};
}
});
app.component("blog-post", {
props: {
type: {
validator(value) {
return ["news", "announcement"].indexOf(value) !== -1;
}
}
},
template: `<p>{{type}}</p>`
});
app.mount("#app");
</script>
</body>
</html>
to add a validator for the type prop.
The validator method is run when we pass in the prop with the given name.
The value is the value that we pass in.
So if we pass in something other than 'new' or 'announcement' like:
<blog-post v-for="post of posts" type="foo"></blog-post>
then we’ll get a warning.
We can also add the required property and set it to true to make a prop required like:
prop: {
type: String,
required: true
}
Conclusion
We can validate props with constructors and validation functions.
Also, we can add the default property to set the default value of a prop.
