Vue.js 패스 슬롯과 래핑된 Bootstrap-Vue Table 구성 요소 연결

Vue.js 패스 슬롯과 래핑된 Bootstrap-Vue Table 구성 요소 연결

부트스트랩-뷰 테이블 구성 요소에 대한 래퍼를 만들려고 한다.이 구성 요소는 다음과 같은 셀 템플릿을 정의하기 위해 슬롯을 사용한다.

<b-table :items="itemsProvider" v-bind="options">
    <template v-slot:cell(id)="data">
        ///...here goes the template for the cell's of itens key "id"
    </template>
</b-table>

그래서, 내가 만들고 있는 포장지는 다음과 같다.

    <div>
        <b-table :items="itemsProvider" v-bind="options" >
            <slot></slot>
        </b-table>
        <b-pagination
                v-model="currentPage"
                :total-rows="rows"
                :per-page="perPage"
                 />
    </div>

그리고 이 구성 요소를 다음과 같이 부르고 싶다.

<TableAjax :options="options">
    <template v-slot:cell(id)="data">
        ///...here goes the template for the cell's of itens key "id"                    
    </template>
</TableAjax>

그런데 b-테이블 부품에 필요한 슬롯이 이름이 붙어서 포장지에서 전달하기가 힘들어.

내가 어떻게 그럴 수 있을까?

슬롯을 하위 구성 요소로 전달하면 다음과 같이 할 수 있다.

<template>
  <div>
    <b-table :items="itemsProvider" v-bind="options" >
      <template v-slot:cell(id)="data">
         <slot name="cell(id)" v-bind="data"></slot>
      </template>
    </b-table>
    <b-pagination
      v-model="currentPage"
      :total-rows="rows"
      :per-page="perPage"
    />
  </div>
</template>

그러나 슬롯 이름을 미리 모를 수도 있으므로 다음과 유사한 작업을 수행해야 한다.

<template>
  <div>
    <b-table :items="itemsProvider" v-bind="options" >
      <template v-for="slotName in Object.keys($scopedSlots)" v-slot:[slotName]="slotScope">
        <slot :name="slotName" v-bind="slotScope"></slot>
      </template>
    </b-table>
    <b-pagination
      v-model="currentPage"
      :total-rows="rows"
      :per-page="perPage"
    />
  </div>
</template>

참조URL: https://stackoverflow.com/questions/58435381/vue-js-pass-slot-to-wrapped-bootstrap-vue-table-component