1

Сделал простой попам на vue, вызывается через метод alert(text), в качестве аргумента передается простой текст.

Теперь стоит задача сделать его динамическим. Чтобы внутрь можно было передать другой компонент и он отобразился внутри.

Например у меня есть компонент categories. Можно как-то сделать чтобы конструкция alert("<categories></categories>") работала?

<div id="app">

    <a @click="alert('First popup')" href="#">Popup</a>

    <a @click="alert('Second popup')" href="#">Popup 2</a>

    <popup
         v-if="popup.show"
         v-on:close="popup.show = false"
         v-cloak>
        {{ popup.text }}
    </popup>

</div>

<template id="popup">
    <div class="popup-container" @click="close">
        <div class="popup-content" @click.stop>
            <slot></slot>
            <div>
                <a @click="close" href="#">Close</a>
            </div>
        </div>
    </div>
</template>

<template id="categories">
    <div>
        <a v-for="number in 10">
           {{ number }}
        </a>
    </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

    Vue.component('popup', {
        template: '#popup',
        methods: {
            close: function () {
                this.$emit('close');
            }
        }
    });

    Vue.component('categories', {
        template: '#categories'
    });

    var app = new Vue({
        el: '#app',
        data: {
            popup: {
                show: false,
                text: ""
            }
        },
        methods: {
            alert: function ($text) {
                this.popup.text = $text;
                this.popup.show = true;
            }
        }
    });

</script>

Код - https://jsfiddle.net/mezhevikin/du4ca9z7/

2 ответа 2

1

Решение оказалось в специальном динамическом тэге <component v-bind:is="popup.component" :popup="popup"></component>

В переменной popup.component мы просто храним строку с именем компонента.

Документация

0

Здесь не обсуждается дизайн приложения из вопроса, оставляем это "за скобками", а говорим только о динамической отрисовке, получении HTML-кода компонента.

это эксперимент*

пример измененного fiddle из вопроса

Ниже некоторые заметки про использования .$mount() для доступа к экземпляру компонента

// сохраним в переменную
var Cat = Vue.component('categories', {})

// добавим небольшие изменения в компонент

// добавим "новый" метод для "запуска" компонента
methods: {
  alert: function(){/*...*/},
  runComponent: function(){ // отдельный метод для отрисовки
    // получаем экземпляр компонента
    var cat_ = new Cat()

    _cat.$mount() // <<< ! как будто монтируем компонент ;)        

    // нужно учесть, что прямая передача HTML является небезопасным решением
    // $refs - это рекомендованный способ получить ссылку на html элемент
    // в данном случае мы добавили <div ref="wrapper">..</div>
    // _cat.$el.outerHTML или _cat.$refs.wrapper.outerHTML  
    this.popup.text = _cat.$refs.wrapper.outerHTML // передаем html 
    this.popup.show = true  
  }
}

если это приложение, то стоит обратить внимание на возможность использования @vue/cli - это удобно для прототипирования

bonus

Как указал автор вопроса (в комментариях и собственном ответе) - есть родная во Vue возможность динамического переключения компонентов используя мета-компонент <component ...></component>, но это две разных возможности. Первая дает возможность отрисовывать HTML, теряя при этом связанность и реактивность (например: статичные уведомления), а вторая переключать компоненты (например "табы"). Но такое требуется довольно редко, правильным будет - лучше проектировать приложение и использовать изолированные независимые компоненты.

3
  • спасибо за ответ. но в данном решение вы копируете сам html, но при этом если categories реактивный или имеет события, то они перестают работать. Попробуйте в categories на ссылку сделать @click="alert(number)" . Правильным решением в данном случае является использование component (подробнее ниже в ответе). 16 авг 2018 в 13:31
  • да конечно, component ru.vuejs.org/v2/api/#component, я с этого и начал размышлять, но так и не понял логики "дизайна" вашего приложения. С точки зрения вызова компонента, да это решение, с точки зрения вашего примера - нет, там всё вообще не так. Перепишите, может будет хорошо. Если сделаете вызов двух разных компонентов - это уже другое . Почему и сделал ссылку на "дизайн" приложения.
    – diproart
    16 авг 2018 в 13:41
  • да, ок... посмотрел на код, и так и не понял, зачем такая сложность... Но вам виднее. Можно передавать данные через атрибуты и обратно слать события. А здесь как-то, не пойму короче...)
    – diproart
    16 авг 2018 в 14:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.