Как передать в slot компонент?

Question

[Валерий В.]

Добрый день!
Не получается передать компонент в slot другого компонента.

// компонент Test
<template>
<div>
    <slot name="test_slot"></slot>
</div>
</template>

// создаем экземпляр компонента Test
const TestComponent= Vue.extend(Test);
let component = new TestComponent({
   el: document.createElement('div'),
   propsData
});

// другой компонент
let componentSome = Vue.extend(Some);
let content = new componentSome ({
    el: document.createElement('div')
});

Как передать content в test_slot компонента Test?

Answer 1

[alex]

test.$slots['test_slot'] = [ test.$createElement(some.$options) ]

Comments

[Валерий В.]

Спасибо!
Работает.

[Валерий В.]

Дополнительный вопрос:
А как передавать не только компонент, а, допустим HTML?
Например:

let code = `
<div>
<p>
<some></some>
</p>
</div>
`;

[alex]

Валерий В., ну первое что пришло в голову.

[Валерий В.]

Alex, спасибо! Вы закрываете мои пробелы в знаниях)

[Валерий В.]

Alex, будьте добры - еще один вопрос по первому решению.
У меня почему то перестал быть доступен this.$store в подключаемом компоненте Some, т.е. когда просто отдельно подключаю Some через Vue.component он нормально работает, а когда через slot - не работает.
Теряется контекст this или что-то другое?? Как исправить? Спасибо!

[alex]

Валерий В., например вот так хранилище доступно. а у вас как?

[Валерий В.]

Alex, Спасибо, понял как сделать. Подключил store в компоненте и заработало. Только вопрос - а почему $store корневого экземпляра Vue не наследуется в компоненте Some ?
Ну, и, соответственно, получается router в компоненте Some тоже надо будет отдельно подключать, так?

[alex]

Валерий В., приведите пример, а то я под конец дня уже торможу)

[Валерий В.]

new Vue({
    el: '#app',
    router,
    store,
    i18n,
    render: h => h(App)
  });

Всё, что подключено в root Vue, нужно будет подключать в компоненте Test:

const test= new Test({
router,
store,
i18n,
});

[alex]

Валерий В., я имел ввиду полный пример, где видно как вы связываете some и root. вообще store, router и прочее добро нужно подключать в том конструкторе который вы монтируете в #app. т.е. как то так и вот так

[Валерий В.]

Alex,
так я и связываю, как вы написали в самом первом ответе.

const Some = Vue.extend({
	template: `<div>Some</div>`
})

const test = new Test()
const some = new Some()

test.$slots['test_slot'] = [ test.$createElement(some.$options) ]

test.$mount('#app')

При такой связи нужно отдельно пробрасывать store и другие глобальные компоненты отдельно в Some через Test, как вы и написали:

const test = new Test({
	store,
  route,
  etc..
})

А в root монтирую и store и router и все остальное глобальное.

new Vue({
    el: '#app',
    router,
    store,
    i18n,
    render: h => h(App)
  });

И к глобально подключенным store, router и другие компонентам при такой связи нет доступа из Some, их только отдельно подключать через Test. По крайней мере, я не смог получить доступ.

А Test подключаю к root как метод экземпляра через прототип

Vue.prototype.$test= function (methodOptions) {
    // некоторая логика ...
  }

[alex]

Валерий В., >А Test подключаю к root как метод экземпляра через прототип

чет это для меня уже высшая математика какая-то пошла), ни разу не видел чтобы компоненты регистрировали через прототип, боюсь тут вам не помогу, либо я просто не до конца понимаю ваших замыслов

[Валерий В.]

Alex, наверное, я не очень корректно высказался.
В main.js регистрирую как плагин:

import VueTest from './components/VueTest ';
Vue.use(VueTest , {});

В файле плагина VueTest создаю Test как метод экземпляра:

Vue.prototype.$test= function(options) {
/*const Some = Vue.extend({
  template: `<div>Some</div>`
})*/
const test = new Test({
  store,
  route,
  etc..
})
// получаем Some как аргумент options.content
//const some = new Some()
const some = options.content;
test.$slots['test_slot'] = [ test.$createElement(some.$options) ]
test.$mount(document.createElement('div'))
}

Ну, и, потом в любом месте в любом компоненте вызываю Test с аргументом Some (или любым другим компонентом вместо Some):

this.$test({
          content: new (Vue.extend(Some))({})
        });

В компоненте Test в хуке beforeMount монтируем test в DOM:

// к body или куда необходимо
document.querySelector('body').appendChild(this.$el);

Таким образом, любой компонент можно передать в Test и поместить его в slot.

[alex]

Валерий В., так вы и не должны иметь доступ из some. в приведенном выше коде у вас технически контекст test с контекстом root никак не связаны, соответсвенно из some и любого другого компонента, которые вы будете передавать в слот test'а, не будет доступа ко всяким store, route, i18n etc, которые вы объявили при инициализации в new Vue(). у них будет доступ только к тому, что вы определили в new Test(). т.е. по сути в вашем кейсе вы создаете два разных приложения (new Vue, new Test) и у каждого свой контекст. вот первый костыль(а костыль ли это?) который в голову пришел, возможно как-то еще по-элегантней можно придумать.

[Валерий В.]

Alex, ну т.е. один и тот же staff используется для создания обоих конструкторов new Vue, соответственно, доступ к staff имеется у обоих Vue.
Да, я это уже понял, приблизительно так же и сделал. Да и вряд ли это можно считать костылем, ибо сама архитектура по теме вопроса уже есть костыль)
Теперь возник еще вопрос - не могу передать props в тот самый экземпляр Some при его создании. Например:

let some = Vue.extend(Some);
let content = new some({
props: {items}
});
this.$test({
          content: content
        });

В Some, соответственно, имеется :
props: ['items']
Но почему то this.items в Some равно undefined, хотя при создании Some переменная items точно имеет тип Array и не пустая.

[Валерий В.]

В общем, надо передавать объект параметров вторым аргументом в функции:

test.$slots['test_slot'] = [ test.$createElement(some.$options, {props:{items}}) ]

[alex]

Валерий В., так наверное по лучше будет

[Валерий В.]

Alex, ну чисто концептуально если только. По сути одинаково, к тому же у меня передается ряд параметров и для Test тоже, поэтому тут уж как кому больше нравится.
Ну, а вам большое спасибо за участие, по данной теме не так много информации в инете, поэтому, думаю, многим будет интересно почитать этот материал с примерами.

P.S. Модераторов и админов прошу оставить материал в полном объеме, не удалять.