Component के नाम रखना
Consistent component names code को पढ़ना, search करना आसान बनाते हैं और HTML से clash करने से बचाते हैं।
In this page:
Syntax
<!-- PascalCase in single-file components -->
<MultiWordName />
<!-- kebab-case in in-DOM templates -->
<multi-word-name></multi-word-name>Component Naming
Single-file components में component names के लिए PascalCase इस्तेमाल करें और HTML element clashes से बचने के लिए TodoItem जैसे multi-word names। Base components एक Base prefix इस्तेमाल कर सकते हैं, single-instance वाले The, और tightly coupled children एक parent prefix।
In-DOM templates में kebab-case tags इस्तेमाल करें।
Note:
Multi-word names कभी current या future HTML elements से collide नहीं करते।
उदाहरण: Component naming
<!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">
<todo-item text="Buy milk"></todo-item>
<todo-item text="Write code"></todo-item>
</div>
<script>
const app = Vue.createApp({});
// Registered with PascalCase, used with kebab-case in the page
app.component("TodoItem", { props: ["text"], template: "<p>[ ] {{ text }}</p>" });
app.mount("#app");
</script>
</body>
</html>
<!-- Output:
Rendered: [ ] Buy milk[ ] Write code
-->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. #}
आम गलतियां
- Card या Button जैसे single-word names
- अलग-अलग naming styles mix करना
- in-DOM templates में PascalCase tags
चैप्टर सारांश
- Multi-word names इस्तेमाल करें
- SFCs में PascalCase
- In-DOM templates में kebab-case
- Prefix conventions मदद करती हैं
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: