Question

我正在创建一个Vue插件，它将自定义组件添加到全局范围，如下所示：

import CustomComponent from './CustomComponent.vue';

const MyPlugin = {
    install(Vue, options) {
        Vue.component('CustomComponent', CustomComponent);
    }
}

组件本身就是：

<template>
    <h1>Hi from the custom component</h1>
</template>
<script>
export default {
    name: 'CustomComponent',

    mounted() {
        console.log('hello console');
    }
}
</script>

最后，我将插件导入到我的main.js文件中（我正在使用Gridsome）：

export default function (Vue, { router, head, isClient }) {
    Vue.use(MyPlugin);
}

但是现在我希望在制作组件时可以扩展CustomComponent，因为它在全局范围内，如下所示：

<template>
    <h2>Hi again</h2>
</template>
<script>
export default {
    name: 'RegularComponent',
    extends: CustomComponent
}
</script>

但是这给我一个未定义的自定义组件的错误，似乎是因为CustomComponent不在全局范围内，因为如果我将CustomComponent vue文件导入到RegularComponent vue文件中，它将起作用。但是，这不是我想要的行为，我无法弄清楚为什么CustomComponent不仅在全球范围内可用。

Answer 1

CustomComponent是一个javascript对象，您仍然需要导入才能使用它

<script>
import CustomComponent from './CustomComponent.vue'
export default {
  name: 'RegularComponent',
  extends: CustomComponent
}
</script>

我认为将组件定义为全局组件时，这意味着您可以在模板中使用它而无需重新声明：

<template>
  <h2>Hi again</h2>
  <custom-component />
</template>

Vue全局组件未定义

1 个答案: