如何在Vuejs项目中导入多个同名组件？

Question

我继承了一个 Vue.js 项目，其中包括：

import Multiselect from 'vue-multiselect';

<multiselect :multiple="true"
   v-model="selectedTags"
   :options="tagOptions"
   label="title"
   track-by="id"></multiselect>

现在，在同一页面上，我们还应该有一个不同的多选对象，从不同的位置导入，如下所示：

import Multiselect from './../../../../../../vendor/devcompany/scripts/vue/components/form/multiselect.vue';

<multiselect v-model="selectedTeacherIds"
   :sortable="true"
   :options="computedTeacherOptions">
   <template slot="selected-option-value" slot-scope="{optionKey}">
      {{teacherNames[optionKey]}}
   </template>

其中每一个单独工作都很好，但我应该以某种方式导入它们并在同一组件中使用它们。显然，如果不对代码进行某种修改，这将无法工作。

是否有某种语法可以import as更改其中一个对象的名称？或者我是否需要进入其中之一的源代码并更改其中的命名？前者（或不需要更改多选核心文件本身的其他解决方案）会更理想。

编辑：这就是代码更广泛的样子。

import Multiselect from 'vue-multiselect';

import BbcodeEditor from './../elements/bbcode-editor';

import ApiVideoSelect from './api-video-select';

/* import other assets */

export default {

    components: {ApiVideoClassDetail, ApiProgramCard, ApiUploader, Multiselect, Draggable, Datepicker, BbcodeEditor, ApiVideoSelect},

所以我想知道如何编辑此语法以在不同的名称下添加其他多选。我不明白这是如何运作的：

import Multiselect from 'vue-multiselect';
import Multiselect from './../../../../../../vendor/frismedia/scripts/vue/components/form/multiselect.vue';

Answer 1

您不必更改核心文件，只需在使用组件时更改名称即可：

import Multiselect from '....vue/components/form/multiselect.vue';

// your parent component
export default {
     components: {
         'my-custom-multiselect' : Multiselect 
     }
}

// in template:
<my-custom-multiselect> </my-custom-multiselect>

更简单的语法： 导入时更改名称

import MyCustomMultiselect from '....vue/components/form/multiselect.vue';

export default {
     components: {
          MyCustomMultiselect
     }
}

// in template:
<my-custom-multiselect> </my-custom-multiselect>