如何正确注册Vue组件，解决<ejs-dropdownlist>未识别报错

算力阿峰

2026-10-14

问题原因

你当前导入并注册的是Syncfusion的多选组件MultiSelectPlugin，但模板中使用的<ejs-dropdownlist>是独立的单选下拉列表组件，两者不匹配，因此Vue无法识别该自定义组件标签，触发报错。

解决方案

修改InlineDropdown.vue的<script>部分代码：

替换导入的插件为下拉列表对应的DropDownListPlugin
注册对应插件

修正后的完整script代码如下：

import Vue from "vue";
// 改为导入下拉列表组件插件
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
import { Query } from '@syncfusion/ej2-data';
import * as data from './dataSource.json';

// 注册正确的插件
Vue.use(DropDownListPlugin);

export default Vue.extend ({
    data: function() {
        return {
            fields: { text: 'Name'},
            height: '220px',
            width: '63px',
            popupWidth: '140px',
            value: 'Michael',
            watermark: 'Select an employee',
            data: data['employees'],
        };
    }
});

额外优化建议

如果项目多处使用Syncfusion组件，建议统一在main.js中注册相关插件，避免在单组件内重复全局注册
如果仅当前组件使用该下拉列表，也可以选择局部注册，避免全局污染，写法如下：

import Vue from "vue";
// 导入单个组件
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
import { Query } from '@syncfusion/ej2-data';
import * as data from './dataSource.json';

export default Vue.extend ({
    // 局部注册组件
    components: {
        'ejs-dropdownlist': DropDownListComponent
    },
    data: function() {
        return {
            fields: { text: 'Name'},
            height: '220px',
            width: '63px',
            popupWidth: '140px',
            value: 'Michael',
            watermark: 'Select an employee',
            data: data['employees'],
        };
    }
});