Блог

Главная - Вопросы по программированию - Передача тега компонента в данные

Передача тега компонента в данные

#vue.js #templates #vuejs2

#vue.js #шаблоны #vuejs2

Вопрос:

Можно ли вызвать тег компонента modalBlock как данные?

 <template>
<div v-html="modalBlock">
</div>
</template>

export default {
    data() {
        return {
            modalBlock: `<general-modal
                            is-gray-bg="true">
                            <template v-slot:header>
                                <h3 v-text="modalHeader"></h3>
                            </template>

                            <template v-slot:body
                                      v-if="isModalOpened">

                                <div v-if="fetchedGift">
                                    <gift
                                        :gift="JSON.stringify(fetchedGift)"
                                    ></gift>
                                </div>
                                <div v-else>
                                        <div>
                                            <gift-list></gift-list>
                                        </div>
                                </div>
                            </template>

                            <template v-slot:txt>
                                <a class="link-blue">Choose</a>
                            </template>
                        </general-modal>`,
            modalHeader: 'Choose gift',
            isModalOpened: false,
            fetchedGift: false
        }
    }
}

Комментарии:

1. вы можете использовать <component /> элемент и установить :is атрибут для объекта параметров, который использует ваш шаблон модального блока. вам нужно будет импортировать версию vue, в которой есть компилятор среды выполнения.

2. вместо того, чтобы хранить его в данных .. вы можете создать отдельный компонент, а затем использовать его здесь с помощью <компонент v-bind:is=»имя_компонента»></component>