Как в компоненте Vue создать фабрику компонентов?

Question

[vitaly_74]

Проблема вот в чем:
у меня есть базовый компонент модельного окна.
Я хочу дополнить этот компонент расширить этот компонент другими. но все их вызывать простым способом например, когда я пишу
<modal name="add_new_object"></modal>
я хочу вызвать компонент addNewObjects который наследуется посредством mixins от Modal
и в этом компоненте прописать уникальные действия обработки, например, отправку post через axios при отправке формы.
т.е. схема примерно такая:
ModalComponens->is AddNewObject -> AddNewObjectsComponent
как это сделать? перебрал все что можно.
пока самый адекватный вариант это вызывать через тег
<add-new-objects></add-new-objects>
что крайне не удобно для работы с беком.

Answer 1

[Антон Антон]

конкретно то, что описывается похоже на https://ru.vuejs.org/v2/guide/components.html#%D0%...

но вообще обычно в модальном окне (а это оно, судя по названию компонента) есть слот, в который помещается компонент, который делает что нужно.

ну или делается компонент высшего порядка https://habr.com/ru/post/452248/

Comments

[vitaly_74]

не нмого не то.
попробую переформулировать:
Мне нужно заменить родительский элемент дочерним при вызове родительского (с параметром, каким конкретно дочерним элементом нужно заменить родительский)

[vitaly_74]

vitaly_74, либо при вызове какого либо метода в родительском, вернуть дочерний компонент. напрмиер

add_objects: function(){
   return new AddObjectsComponent();
}

только не знаю как правильно это сделать

[Антон Антон]

какая задача стоит?

[vitaly_74]

Антон Антон, так я же написал, возможно не понятно описал.

Answer 2

[Aetae]

<template functional>
  <component :is="props.name"/>
</template>

=)

Comments

[vitaly_74]

а можете пример привести как это в родительском компоненте будет работать?

[Aetae]

vitaly_74, это собсно весь код компонента modal.
Если у вас пореган глобально add_new_object вы просто делаете <modal name="add_new_object"></modal> и получаете <add_new_object></add_new_object>

Или я не понял что вам нужно?
Если вы хотетите "на лету" подрубать разные миксины к текущему компоненту в зависимости от переданного параметра - это невозможно сделать нормальным способом(можно похакать по всякому, но не нужно). Благо это и не требуется - достаточно одного компонента обёртки, который всё разрулит, примерно так:
Естественное extends не обязательно статически прописывать, можно и на лету функционально всё делать, главное кэшировать не забывать.)

P.S. В js не принят snake_case, это мозолит глаз.

[vitaly_74]

Aetae, Благодарю, то что надо.
Подскажите
а как посторить такое?

<?php if(!Yii::$app->user->isGuest): ?>
                    <ul class="list-unstyled votestable">
                        <li class="rating-group" @mouseleave="cursor('out', 'assessments-truth')">
                            <div role="radiogroup" class="voteform-assessments voteform unset">
                                <div class="assessments-video-block assessments-truth">
                                    <template v-for="index in 10" :key="index">
                                        <div class="radio" @click="selectAssesments('truth', index)" @mouseenter="cursor('over', 'assessments-truth', index)">
                                            <label>
                                                <i class="adviewcon-star"></i>
                                            </label>
                                        </div> 
                                    </template>
                                </div>
                                <div class="vid-total-score">
                                    <span v-if="assessments.myAssessments != null">
                                        {{ assessments.myAssessments.truth }}
                                    </span>
                                    <span v-else>
                                        0
                                    </span>
                                    <i class="adviewcon-truth" data-toggle="tooltip" data-original-title="<?=Yii::t('base', 'Правдивость')?>"></i>
                                </div>
                            </div>
                        </li>
                        <li class="rating-group" @mouseleave="cursor('out', 'assessments-info')">
                            <div role="radiogroup" class="voteform-assessments voteform unset">

было бы здорово подгружать к php (конкретно у меня yii2) кастомные теги, которые в с свою очередь подгружают компоненты.
например того же самого модального окна:

<modal name="add_objects">
    <?php
    $form = ActiveForm::begin([
        'method' => 'POST',
    ]) ?>
    <?= VueWidget::widget([ //передача значений происходит посредством js функции.
                            'component' => 'multi-select',
                            'property' => [
                                ':options' => [
                                    ['id' => '123', 'value' => 'asadoaskdij'],
                                ],
                                'name' => 'referral'
                            ]
    ]) ?>

    <?php ActiveForm::end(); ?>
    <button class="btn" @click='send'>send php</button>
</modal>

[Aetae]

vitaly_74, сорян, не могу тут помочь, хз как эти ваши виджеты работают.
Моу сказать только две вещи:
1. Это сделать возможно. Потому что не бывает ничего невозможного в подобных задачах.
2. Так делать - плохо. Потому что фронт должен быть отделён от бэка, вся разметка в vue на фронтовой части, с бэка только данные в json по rest(или grphqj, не суть).