Dynamisches Laden von Komponenten in Vue

Hier ein Beispielcode um zur Laufzeit eine Vue Komponente dynamisch dem Dom Tree hinzuzufügen am Beispiel von VueClazyLoad (Image LazyLoading) mit Slots und Properties.

let image_container      = this.$refs.image_container;
let image_path           = 'https://unsplash.it/500';
let clazy_load_component = Vue.extend(VueClazyLoad);
let clazy_load_instance  = new clazy_load_component({
    propsData: { src: image_path }
});
clazy_load_instance.$slots.default = [ clazy_load_instance.$createElement(
                'img',
                {
                    props: {
                        src: image_path
                    }
                })
 ];
clazy_load_instance.$mount();
image_container.appendChild(clazy_load_instance.$el)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.