Tek dosya bileşenlerinde VueJS 2 global bileşenleri nasıl kullanılır?

Question

Ben tek bir dosya bileşenlerin içinde (Vue.component ile) küresel kayıtlı bileşeni kullanmak çalışıyorum ama hep

Örneğin

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

alıyorum:

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> 

Ben yerel olarak kayıt varsa

, Tamam çalışır:

<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> 

kullanın home.vue bu bileşen:

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

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

Answer 2

Sen gerekmez module.exports. Bileşeni global olarak, bu bileşimi, mycomponent.vue dosyasında kaydedebilirsiniz.

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

Sonra

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

main.js eklemek ya da ben genellikle 'globaller' onları ana alanına içe dosyasını bunları kaydeder.

Bu, benim bileşenimi uygulamada herhangi bir yere kullanmanıza izin vermelidir.