vue.js - 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>