如何在 Vue.js 中正确导入组件

Question

我有如下定义的组件：

import Vue from 'vue';
import Datepicker from 'vuejs-datepicker';

Vue.component('DatePicker', {
    template: `
    <datepicker name="date"></datepicker>
  `,
});

我试图从另一个文件导入它并在另一个组件中使用它，但由于某种原因我收到如下错误：

[Vue 警告]：未知的自定义元素：- 你注册了吗 组件正确吗？对于递归组件，请确保 提供“名称”选项。

我对 Vue.js 很陌生，所以我想知道是否有人可以指导我在这里做错了什么！

这是我尝试使用该组件的方式：

require('./datetime-picker');
<DatePicker></DatePicker>

Answer 1

要全局注册一个组件，试试这个：

import Vue from 'vue';
import Datepicker from 'vuejs-datepicker';

Vue.component('DatePicker', Datepicker);

现在您可以通过将其导入其他组件来使用它，而无需使用components: { Datepicker }

Answer 2

如果您在 Vue.js 模板中使用任何组件，您应该在组件的components 属性中声明使用它的人。

确保将其添加为组件中的依赖项 -

import Vue from 'vue';
import Datepicker from 'vuejs-datepicker';

Vue.component('DatePicker', {
    components: { Datepicker },
    template: `
    <datepicker name="date"></datepicker>
  `,
});