如何将模板（槽）从祖父组件传递给 VueJS 中的孙组件？

Question

我在 VueJS 2 中有一个案例，其中有一个 3 级组合的组件（祖父母 - child - 祖父 child），我需要从中传递一个 template/slot祖父母到祖父母 child（来自 Bootstrap + Vue 库 (https://bootstrap-vue.js.org/docs/components/table) 的这个 b-table 组件）。

祖父母组件：

<template>
  <DataTable
    :tableFields="postFields"
    :tableService="posts"\
  />
</template>
<script>
  export default {
    name: 'Posts',
    components: {
      DataTable,
    },
</script>

child分量：

<template>
  <b-table
    :items="items"
    :fields="tableFields"
  />
</template>
<script>
  export default {
    name: 'Posts',
    props: {
      tableFields: {type: Array, required: true},
      tableService: {type: Object, required: true},
    },
    components: {
      DataTable,
    },
</script>

大child组件：

这个是 <b-table> 来自 Bootstrap + Vue (https://bootstrap-vue.js.org/docs/components/table)

因此，正如 Bootstrap + Vue 文档所代表的那样，我可以将 <template> 传递给 <b-table>，但我想先将其从祖父母传递给 child然后从 child 到 <b-table>.

Answer 1

@ruy-garcia 我使用祖父母中定义的属性解决了类似的问题。此解决方案仅在您有一个要更新其中一些属性的插槽时才有效，因此它不那么灵活。

// Grandparent
<app-table
    :tableFooterLink="{
        link: {name: 'new-player'},
        text: 'Create New Player'
    }"
>

然后在 child 组件中检查属性。

// Child component
<vue-good-table>
    <template v-if="tableFooterLink !== undefined" slot="table-actions">
        <router-link class="create-new-player-btn" :to="{name: 'new-player'}">
            {{ tableFooterLink.text }}
        </router-link>
    </template>
</vue-good-table>

export default {
    // stuff
    props: {
        tableFooterLink: {
            type: Object
        }
    }
}

如何将模板（槽）从祖父组件传递给 VueJS 中的孙组件？

How can I pass a template (slot) from grandparent component down to a grandchild in VueJS?

javascript

vue.js

vuejs2

vue-component

bootstrap-vue

祖父母组件：

child分量：

大child组件：