프로그래밍 방식으로 생성된 vuejs 구성 요소 인스턴스에 슬롯을 전달하는 방법

프로그래밍 방식으로 생성된 vuejs 구성 요소 인스턴스에 슬롯을 전달하는 방법

내 앱에서 동적 구성 요소 인스턴스를 생성해야 하며, 이 경우 다음 방법을 사용하십시오.

import Button from 'Button.vue'
...
var Ctor = Vue.extend(Button);
var instance = new Ctor({ propsData: {} });
instance.$mount('#el');

이 모든 것이 잘 되네, 나도 소품 전달이 가능해.하지만 이제 나도 그 인스턴스에 슬롯을 넘겨야 해.나는 다음과 같은 성공적이지 못한 것들을 무작위로 시도했다.

var instance = new Ctor({ propsData: {}, slots: { default: someNode }});

나는 모든 곳을 뒤져봤지만 그것이 가능한지 아닌지 전혀 모른다.조언은?

프로그래밍 방식으로 Vue.js 슬롯을 만드는 방법에서?

TypeScript 정의 파일을 살펴본 결과Vue.jsVue 구성 요소 인스턴스에서 문서화되지 않은 함수를 찾았어:$createElement()내 추측으로는, 그것은 전달된 것과 같은 기능이다.render(createElement)구성 요소의 기능따라서 다음과 같이 해결할 수 있다.

const Constr = Vue.extend(MyComponent);
const instance = new Constr({
    propsData: { someProp: 'My Heading' }
});

// Creating simple slot
const node = instance.$createElement('div', ['Hello']);
instance.$slots.default = [node];

instance.$mount(body);

그러나 이것은 명백히 불법이고 따라서 의심스러운 접근이다.만약 이용 가능한 더 좋은 방법이 있다면 나는 그것에 대답했다고 표시하지 않을 것이다.

슬롯을 조작하여 생성된 인스턴스에 설정할 수 있음$slots키:

import Button from 'Button.vue'
...
var ButtonConstructor = Vue.extend(Button);
var instance = new ButtonConstructor({ propsData: {} });

// SET SLOT
instance.$slots.default = [ 'Hello' ];

instance.$mount('#el');

참조URL: https://stackoverflow.com/questions/48005995/how-to-pass-slots-to-a-programatically-created-vuejs-component-instance