javascript - 如何在单个文件组件中使用 VueJS 2 全局组件？

Question

我正在尝试在单个文件组件中使用全局注册组件(使用 Vue.component)，但我总是得到

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

例如:

主要.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);

或者我通常将它们注册到“全局”文件中，然后将其导入到主文件中。

这应该允许您在应用程序的任何地方使用我的组件。