javascript - template - vue props default

¿Cómo utilizar los componentes globales de VueJS 2 dentro de los componentes de un solo archivo?

Question

Estoy tratando de usar un componente registrado globalmente (con Vue.component ) dentro de un único componente de archivo, pero siempre obtengo

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

Por ejemplo:

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>

Si lo registro localmente, funciona bien:

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

Answer 1

Componente.vue

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

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

Usa este componente en 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

No necesitas el módulo .exportaciones. Puede registrar el componente globalmente teniendo esto dentro del archivo mycomponent.vue.

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

Luego agregue a main.js

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

o por lo general los registro en un archivo ''global'' y luego los importan a la página principal.

Eso debería permitirte usar mi componente en cualquier parte de la aplicación.