Question

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

import Multiselect from 'vue-multiselect';

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

现在，在同一页面上，我们还应该拥有一个从不同位置导入的不同的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>

如何在Vuejs项目中导入具有相同名称的多个组件？

1 个答案: