VueJ - 슬롯과 스코프 슬롯을 자 템플릿의 컴포넌트에 전달

VueJ - 슬롯과 스코프 슬롯을 자 템플릿의 컴포넌트에 전달

부모 컴포넌트에서 자녀 컴포넌트로 슬롯/스코프 슬롯을 패스하는 방법을 찾고 있습니다.내가 설명해줄게...

bootstrap-vue b-table 컴포넌트를 사용하여 데이터 테이블컴포넌트를 만들었습니다.매우 간단한 코드는 다음과 같습니다.

데이터 테이블vue:

<template>
    <div>
        <page-selector/>
        <b-table></b-table>
        <pager/>
    </div>
</template>

필드 정의와 api endpoint 목록을 소품으로 받아 b-table로 전달하면 모든 것이 정상적으로 작동합니다.예를 들어 DataTable의 모든 사용자를 렌더링하는 구성 요소:

사용자 테이블vue:

<template>
     <data-table :fields="fields" :url="url"/>
</template>

현재 직면한 문제는 다음과 같습니다.

bootstrap-vue 컴포넌트 b-table은 여러 슬롯을 사용합니다.예를 들어 테이블 캡션을 변경하는 슬롯입니다(<template slot="table-caption">This is a table caption.</template>또는 테이블 내의 필드를 포맷하거나 html 문자를 허용하기 위해 슬롯의 스코프를 지정합니다( ).<span slot="email" slot-scope="data" v-html="data.value"></span>).

UsersTable 컴포넌트에서 DataTable 컴포넌트로 슬롯과 스코프 슬롯을 모두 넘겨 b-table 컴포넌트에서 슬롯으로 사용할 수 있도록 하려면 어떻게 해야 합니까?도와주셔서 감사합니다.

아마 제가 지금 생각을 제대로 하고 있지 않을 수도 있지만, 제가 보기엔 같은 이름 있는 슬롯을 자신의 슬롯에 추가할 수 있을 것 같습니다.DataTable.vue:

<template>
    <div>
        <page-selector/>
        <b-table>
            <template slot="table-caption"><slot name="table-caption"></slot></template>
            ....
        </b-table>
        <pager/>
    </div>
</template>

언급URL : https://stackoverflow.com/questions/50641220/vuejs-passing-slots-and-scoped-slots-down-to-the-component-in-child-template