Как правильно делать такие компоненты и как они называются?

Question

[Константин Б.]

Привет. Меня интересует как разработать такой компонент, когда например я его объявляю в одном месте, но выводится он в другом.
К примеру я хочу сделать модальное окно для каждого Item, чтобы оно потом выводилось не в теле самого Item, а например где-нибудь перед

Answer 1

[0xD34F]

Как называются - да без понятия, обычные компоненты:

const Component = Vue.extend(...);

Экземпляры создаёте не через шаблон/render-функцию других компонентов, а вручную вызываете конструктор и добавляете корневой элемент куда там вам надо:

document.body.appendChild(new Component(...).$mount().$el);

Удаление - так же вручную, вызываете метод $destroy и удаляете корневой элемент из DOM.

Comments

[Константин Б.]

Только нашел еще сделать подобное. Получилось так.

<template>
    <div>
        <li @click.prevent.stop="togglePanel" class="nav-item nav-item__favourites">
            <a href="#favourites" class="nav-link">
                <img width="16" height="16px" src="/images/heart-outline.svg" alt="">
                Понравилось
                <div class="counter-favourites">{{ favouriteCount }}</div>
            </a>
        </li>
        <panel-favourites-component v-if="isOpenPanel"/>
    </div>
</template>

Это у меня родительский компонент, в него я вставил окно(панель) как дочерний. Как срабатывает togglePanel то дочерний компонент создается и когда срабатывает mount я компонент переношу в body

mounted() {
            this.fetchItems();
            document.body.appendChild(this.$el);
        },

Но ваш подход мне кажется более правильным наверно. Попробую оба. Спасибо!