VueJs: 동적 컴포넌트를 다른 컴포넌트에 소품으로 전달하여 렌더링

VueJs: 동적 컴포넌트를 다른 컴포넌트에 소품으로 전달하여 렌더링

테이블 컴포넌트를 작성하려고 합니다.

그리드의 열 메타데이터를 정의하여 어레이 프로포트로 전달하고 실제 데이터를 그리드에 다른 프로포트로 전달합니다.

저는 그것을 별 문제 없이 달성할 수 있었습니다.

그러나 사용자가 셀 렌더링 방법을 정의/제어할 수 있도록 각 열 정의의 일부로 동적 구성요소를 전달합니다(같은 셀에 편집 삭제 버튼이 있는 경우 등).

동적 구성 요소를 소품으로 전달하고 이 구성 요소를 렌더링할 수 있는 방법이 있습니까?

<parent-comp>
  <tr class="" v-for="result in dataSource">
    <template v-for="column in columns">
      <td>
        <template v-if="column.customComponent">
          ######## How do I render this customComponent ########
        </template>
      </td>
    </template>
  </tr>
</parent-comp>

여기서 datas소스 데이터는 다음과 같습니다.

[
  columns: [{
    name: "something",
    customComponent: SomeCustomComponent
  }, {
    name: "another thing",
    customComponent: AnotherOtherCustomComponent
  }]
]

위의 질문이 명확하지 않은 경우 기꺼이 설명/구체적으로 설명하겠습니다.

위의 설명에서 제시된 바와 같이 템플릿에서 동적 구성 요소를 사용하여 속성에서 구성 요소의 정의를 전달할 수 있습니다.

console.clear()

const ColumnOne = {
  template: `<h1>I am ColumnOne</h1>`
}

const ColumnTwo = {
  template: `<h1>I am ColumnTwo</h1>`
}

Vue.component("parent-comp",{
  props:["columns"],
  template:`
    <div>
      <component v-for="column in columns" 
                 :is="column.customComponent" 
                 :key="column">
      </component>
    </div>
  `
})

new Vue({
  el:"#app",
  data:{
    columns:[{
      name: "something",
      customComponent: ColumnOne
    }, {
      name: "another thing",
      customComponent: ColumnTwo
    }]
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <parent-comp :columns="columns"></parent-comp>
</div>

언급URL : https://stackoverflow.com/questions/45106508/vuejs-pass-dynamic-components-as-props-to-another-component-and-render-them