Component का Registration
Components पूरी app के लिए globally या एक single component के अंदर locally register हो सकते हैं।
In this page:
Syntax
const app = Vue.createApp({});
app.component('component-name', definition); // global
export default {
components: { LocalComponent } // local
}Component Registration
app.component एक component हर जगह available बनाता है लेकिन bundlers इसे tree-shake नहीं कर सकते। components option से Local registration dependencies explicit बनाता है और bundles छोटे रखता है।
script setup वाले single-file components में, imported components automatically usable होते हैं।
Note:
सिर्फ कुछ जगहों पर इस्तेमाल होने वाले components के लिए local registration prefer करें।
उदाहरण: Component registration
<!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">
<global-tag></global-tag>
<parent-box></parent-box>
</div>
<script>
const LocalChild = { template: "<i>local child</i>" };
const app = Vue.createApp({});
app.component("global-tag", { template: "<p>I am global</p>" });
app.component("parent-box", {
components: { "local-child": LocalChild },
template: "<p>Parent uses: <local-child></local-child></p>",
});
app.mount("#app");
</script>
</body>
</html>
<!-- Output:
Rendered: I am globalParent uses: local child
-->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. #}
आम गलतियां
- सब कुछ globally register करना
- यह उम्मीद करना कि एक locally registered component children में काम करेगा
- components option भूल जाना
चैप्टर सारांश
- app.component global है
- components option local है
- Local registration tree-shaking में मदद करती है
- Children local components inherit नहीं करते
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: