Vue.js 슬롯을 프로그래밍 방식으로 작성하는 방법

Vue.js 슬롯을 프로그래밍 방식으로 작성하는 방법

슬롯이 있는 컴포넌트는 다음과 같습니다.

<template>
    <div>
        <h2>{{ someProp }}</h2>
        <slot></slot>
    </div>
</template>

어떤 이유로 이 구성 요소를 수동으로 인스턴스화해야 합니다.저는 이렇게 하고 있습니다.

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

문제는 슬롯 콘텐츠를 프로그래밍 방식으로 작성할 수 없다는 것입니다.지금까지 간단한 문자열 기반 슬롯을 만들 수 있습니다.

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

// Creating simple slot
instance.$slots.default = ['Hello'];

instance.$mount(body);

문제는 어떻게 하면$slots프로그래밍 방식으로 작성 중인 인스턴스로 전달합니다.new?

주의: Vue.js 풀빌드를 사용하고 있지 않습니다(런타임만).따라서 템플릿을 즉시 컴파일할 수 있는 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);

그러나 이것은 명백히 문서화되어 있지 않고 따라서 의문스러운 접근법이다.더 나은 접근법이 있다면 답변으로 표시하지 않겠습니다.

드디어 슬롯 요소를 프로그래밍 방식으로 작성하는 방법을 찾은 것 같습니다.제가 봤을 때, 이 접근법은 기능적인 컴포넌트에는 효과가 없는 것 같습니다.이유는 잘 모르겠어요.

컴포넌트에 독자적인 렌더 메서드를 구현하는 경우 createElement 메서드(또는 렌더링 메서드에서 앨리어스된 것)를 사용하여 하위 요소에 전달하는 슬롯을 프로그래밍 방식으로 작성하고 {slot:NAME_OF_를 포함하는 데이터 해시를 전달할 수 있습니다.YOUR_SLOT} 뒤에 해당 슬롯 내의 자식 배열이 표시됩니다.

예를 들어 다음과 같습니다.

Vue.config.productionTip = false
Vue.config.devtools = false;

Vue.component('parent', {
  render (createElement) {
    return createElement('child', [
      createElement('h1', { slot: 'parent-slot' }, 'Parent-provided Named Slot'),
      createElement('h2', { slot: 'default' }, 'Parent-provided Default Slot')
    ])
  }
})

Vue.component('child', {
  template: '<div><slot name="parent-slot" /><slot /></div>'
})

new Vue({
  el: '#app',
  template: '<parent />'
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id='app'>
</div>

(이것은, 실제로는 대답하지 않습니다).How to create Vue.js slot programatically?그래도 문제는 해결이 됩니다.)

이 트릭은 사용하는 것에 비해 덜 해킹적이다.$createElement().

기본적으로 등록하는 새 구성 요소를 만듭니다.MyComponent로컬 컴포넌트로 사용합니다.

const Constr = Vue.extend({
  template: `
  <MyComponent someProp="My Heading">
    <div>slot here !!!</div>
  </MyComponent>
  `,
  components: {
    MyComponent: MyComponent
  }
});
const instance = new Constr().$mount('#app');

데모: https://jsfiddle.net/jacobgoh101/shrn26p1/

방금 vue 포럼의 slots에서 이 질문에 대한 답을 발견했습니다.

원칙은 다음과 같습니다.create Element('slot')만한 것은 없습니다.대신 슬롯된 innerHtml을 함수로 제공하는 렌더 함수 $scopedSlots.default()가 있습니다.

사용방법:

render: function (createElement) {
  const self = this;
  return createElement("div", this.$scopedSlots.default());
}

슬롯에 대해 지정된 내용이 없는 경우 기본값을 제공하려면 사용자가 직접 구분 코드를 작성하고 다른 내용을 렌더링해야 합니다.(상기 링크에는 보다 자세한 예가 기재되어 있습니다).

함수는 배열을 반환하므로 렌더 함수의 루트로 사용할 수 없습니다.위의 예에서 div와 같이 단일 컨테이너 노드로 랩해야 합니다.

언급URL : https://stackoverflow.com/questions/50150668/how-to-create-vue-js-slot-programmatically