Props
Props are custom attributes a parent uses to pass data down into a child component.
In this page:
Syntax
app.component('child-name', {
props: ['propName'],
template: '<p>{{ propName }}</p>'
});
<child-name prop-name="value"></child-name>
<child-name :prop-name="expression"></child-name>Props
Declare props in the child with the props option, then pass values with attributes. Use :prop to pass non-string values such as numbers and objects. Props flow one way, from parent to child, and the child should not mutate them.
Note:
Kebab-case attributes in HTML map to camelCase props in JavaScript.
Example: Props
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<user-badge name="Ada" :age="36" :skills="['math','code']"></user-badge>
</div>
<script>
const app = Vue.createApp({});
app.component("user-badge", {
props: ["name", "age", "skills"],
template: "<p>{{ name }} ({{ age }}) knows {{ skills.join(' & ') }}. Age type: {{ typeof age }}</p>",
});
app.mount("#app");
</script>
</body>
</html>
<!-- Output:
Rendered: Ada (36) knows math & code. Age type: number
-->Live Example
Related Topics
Common Mistakes
- Mutating props inside the child
- Passing a number without v-bind so it becomes a string
- Forgetting to declare the prop
Chapter Summary
- props declare accepted inputs
- :prop passes non-string values
- Data flows one way
- Kebab-case maps to camelCase
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: