Блог

Я унаследовал 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 и, таким образом, изменить имя одного из объектов? Или мне нужно зайти в исходный код одного из них и изменить там название? Первое (или какое-либо другое решение, не требующее изменения самих файлов ядра multiselect) было бы более желательным.

РЕДАКТИРОВАТЬ: так выглядит код в более широком смысле.

 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';
  

Вам не нужно изменять основные файлы, просто измените имя при использовании компонента:

 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>