如何在單個文件組件中使用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

您不需要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);

或者我通常在'全局'文件中注冊它們，然后將它們導入到主文件中。

這應該允許您在應用程序的任何位置使用my-component。

Answer 2

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>