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>