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.