如何在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屬性中聲明該components 。

確保將其添加為組件中的依賴項-

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

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