वेबपैक

Question

के साथ व्यू घटक आयात करना मेरे पास वेबपैक के साथ एक हैलो वर्ल्ड वू ऐप सेटअप है और प्रारंभिक ऐप घटक काम कर रहा है और शरीर पर लगाया गया है। हालांकि उस ऐप घटक के भीतर मैं यह नहीं समझ सकता कि मैंने बनाए गए अधिक घटकों का उपयोग कैसे किया जाए।

main.js

import Vue from 'vue' 
import App from './app.vue' 

new Vue({ 
    el: 'body', 
    components: { App } 
}) 

app.vue

<template> 
    <div class="message">{{ message }}</div> 
</template> 

<script> 
    export default { 
     data() { 
      return { 
       message: 'Hello World' 
      } 
     } 
    } 
</script> 

मैं

import TopBar from './top-bar.vue' 

दोनों main.js में और app.vue तो की स्क्रिप्ट खंड की कोशिश की है का उपयोग कर की कोशिश की

<top-bar></top-bar> 

भाग्य के बिना।

मुझे लगता है कि मैं इस तरह के Vue डॉक्स यह करता है के रूप में घटक रजिस्टर करने के लिए कैसे ठीक, याद कर रहा हूँ:

Vue.component('top-bar', TopBar); 

लेकिन मुझे लगता है जब Vue-लोडर के साथ webpack का उपयोग कर मैं कुछ अलग करने की जरूरत है।

Answer 1

आप इसे विश्व स्तर पर रजिस्टर कर सकते हैं जैसे आप से पता चला है, या आप Vue उदाहरण के components वस्तु को जोड़ने की आवश्यकता है यदि आप एक ही घटक में उपयोग के लिए स्थानीय स्तर पर यह पंजीकृत करना चाहते हैं:

<template> 
    <top-bar></top-bar> 
    <div class="message">{{ message }}</div> 
</template> 

<script> 
    import TopBar from './top-bar.vue' 
    export default { 
     data() { 
      return { 
       message: 'Hello World' 
      } 
     }, 
     components: { 
      TopBar 
     } 
    } 
</script> 

Answer 2

आप कर सकते हैं इसे घटकों के ऑब्जेक्ट में उपयुक्त नाम दें जैसा दिखाया गया है

<template> 
    <nav-bar></nav-bar> 
</template> 

<script> 

    import TopBar from './TopBar.vue' 

    export default { 
     components: { 
      'nav-bar': TopBar 
     } 
    } 
</script>