एकल फ़ाइल घटकों के अंदर VueJS 2 वैश्विक घटकों का उपयोग कैसे करें?

Question

मैं एक विश्व स्तर पर पंजीकृत घटक (Vue.component के साथ) एक एकल फाइल घटक के अंदर उपयोग करने के लिए कोशिश कर रहा हूँ लेकिन मैं हमेशा

vue.common.js:2611[Vue warn]: Unknown custom element: <my-component> - did you register the component correctly? 

उदाहरण के लिए हो रही है:

main.js:

... 
Vue.component('my-component', { 
    name: 'my-component', 
    template: '<div>A custom component!</div>' 
}) 
... 

home.vue:

<template> 
    <div> 
     <my-component></my-component> 
    </div> 
</template> 
<script> 
    module.exports = { 
     name: 'home' 
    } 
</script> 

अगर मैं यह स्थानीय स्तर पर रजिस्टर, यह ठीक काम करता है:

<template> 
    <div> 
     <my-component></my-component> 
    </div> 
</template> 
<script> 
module.exports = { 
    name: 'home', 
    components: { 
     'my-component': require('./my-component.vue') 
    } 
} 
</script> 

Answer 1

Component.vue

<template><div>A custom component!</div></template> 

<script>export default { code here... }</script> 

home.vue में इस घटक का उपयोग करें:

<template> 
    <div> 
     <my-component></my-component> 
    </div> 
</template> 

<script> 
    import component from './component.vue' 
    export default { 
    components: { my-component: component } 
    } 
</script> 

Answer 2

आप की जरूरत नहीं है module.exports। आप mycomponent.vue फ़ाइल के भीतर इसे वैश्विक रूप से घटक पंजीकृत कर सकते हैं।

<template> 
    <div>A custom component!</div> 
</template> 
<script> 
    export default {} 
</script> 

फिर main.js को

import MyComponent from './component.vue' 
Vue.component('my-component', MyComponent); 

जोड़ सकते हैं या मैं आम तौर पर उन्हें एक 'वैश्विक' फ़ाइल उन्हें आयात कि मुख्य में में रजिस्टर।

इसके बाद आपको ऐप में कहीं भी मेरे घटक का उपयोग करने की अनुमति देनी चाहिए।