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>
  `,
});

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

2 个答案: