Props का परिचय
Props custom attributes हैं जिनसे एक parent data को एक child component में नीचे pass करता है।
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
props option से child में props declare करें, फिर attributes से values pass करें। numbers और objects जैसी non-string values pass करने के लिए :prop इस्तेमाल करें। Props एक तरफ flow करते हैं, parent से child तक, और child को इन्हें mutate नहीं करना चाहिए।
Note:
HTML में Kebab-case attributes JavaScript में camelCase props में map होते हैं।
उदाहरण: 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/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- child के अंदर props mutate करना
- v-bind के बिना एक number pass करना ताकि यह एक string बन जाए
- prop declare करना भूल जाना
चैप्टर सारांश
- props accepted inputs declare करता है
- :prop non-string values pass करता है
- Data एक तरफ flow करता है
- Kebab-case camelCase में map होता है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: