如何在单击时将元素从父元素传递给子组件模态？

Question

我正在使用bootstrap-vue表填充从API提取的数据。我无法将行中的数据传递给子模式组件。

我尝试绑定数据，但没有将其传递给孩子。 这是父vue组件的其余部分。

        <template>

<b-container fluid style="width: 80%">
    <link rel="stylesheet"
          href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
          integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
          crossorigin="anonymous">
    <!-- User Interface controls -->
    <b-row>
        <b-col md="6" class="my-1">
            <b-form-group label-cols-sm="3" label="Filter" class="mb-0">
                <b-input-group>
                    <b-form-input v-model="filter" placeholder="Type to Search"></b-form-input>
                    <b-input-group-append>
                        <b-button :disabled="!filter" @click="filter = ''">Clear</b-button>
                    </b-input-group-append>
                </b-input-group>
            </b-form-group>
        </b-col>

        <b-col md="6" class="my-1">
            <b-form-group label-cols-sm="3" label="Sort" class="mb-0">
                <b-input-group>
                    <b-form-select v-model="sortBy" :options="sortOptions">
                        <option slot="first" :value="null">-- none --</option>
                    </b-form-select>
                    <b-form-select v-model="sortDesc" :disabled="!sortBy" slot="append">
                        <option :value="false">Asc</option> <option :value="true">Desc</option>
                    </b-form-select>
                </b-input-group>
            </b-form-group>
        </b-col>

        <b-col md="6" class="my-1">
            <b-form-group label-cols-sm="3" label="Sort direction" class="mb-0">
                <b-form-select v-model="sortDirection">
                    <option value="asc">Asc</option>
                    <option value="desc">Desc</option>
                    <option value="last">Last</option>
                </b-form-select>
            </b-form-group>
        </b-col>

        <b-col md="6" class="my-1">
            <b-form-group label-cols-sm="3" label="Per page" class="mb-0">
                <b-form-select v-model="perPage" :options="pageOptions"></b-form-select>
            </b-form-group>
        </b-col>
    </b-row>

    <b-row>
        <b-col  align="right" class="mt-2 mb-2">


            <b-button v-b-modal.modal class="btn btn-success"><font-awesome-icon icon="folder-plus"></font-awesome-icon> New Claim</b-button>
            <modal  v-on:refreshAfterUpdate="refresh()"></modal>
                             <!-- @updateDataTable="newData"  -->

        </b-col>
    </b-row>

                    <!-- Main table element -->
    <b-table

            show-empty
            stacked="md"
            :items="items"
            :fields="fields"
            :current-page="currentPage"
            :per-page="perPage"
            :filter="filter"
            :sort-by.sync="sortBy"
            :sort-desc.sync="sortDesc"
            :sort-direction="sortDirection"
            @filtered="onFiltered"


    >
        <template slot="carrier" slot-scope="row">
            {{ row.value }}
        </template>


        <template slot="SubrogateAmount" slot-scope="data">
             {{ row.value.SubrogateAmount }}
        </template>


        <template slot="actions" slot-scope="row">
            <b-button v-b-modal.edit-modal class="btn" variant="primary" size="sm"  @click="showinfo(row.item, row.index, $event.target)"  data-target="#edit-modal">
                <i class="far fa-edit">

                    <edit-modal
                            :items="items"
                            v-on:refreshAfterUpdate="refresh()"

                    >

                    </edit-modal>
                </i>

            </b-button>

        </template>

        <template slot="row-details" slot-scope="row">
            <b-card>
                <ul>
                    <li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value }}</li>
                </ul>
            </b-card>
        </template>
    </b-table>

    <b-row>
        <b-col md="6" class="my-1">
            <b-pagination
                    v-model="currentPage"
                    :total-rows="totalRows"
                    :per-page="perPage"
                    class="my-0"

            ></b-pagination>
        </b-col>
    </b-row>


</b-container>

     showinfo (item, index, button) {
       this.infoModal.type = item.type 
       this.infoModal.id = `Row index: ${index}`
       this.$root.$emit('bv::show::edit-modal', item, button)
     },

我希望将元素传递给子组件。