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

Posted 2023-02-23

【中文标题】如何在 VueJS 中将模板（插槽）从祖父组件传递给孙子？

【英文标题】：How can I pass a template (slot) from grandparent component down to a grandchild in VueJS?

【发布时间】：2018-08-19 16:19:58

【问题描述】：

我在 VueJS 2 中有一个案例，其中有一个 3 级组合的组件（祖父母 - 孩子 - 孙子），我需要将一个模板/插槽从祖父母向下传递给孙子（这是一个 b-table 组件来自Bootstrap + Vue 库 (https://bootstrap-vue.js.org/docs/components/table))。

祖父组件：

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

子组件：

<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>

孙子组件：

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

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

【问题讨论】：

我没有看到任何插槽。不应该有吗？

【参考方案1】：

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

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

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

// 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
        
    

【讨论】：

谢谢@stuart-nelson！有道理 =) 看起来不太花哨，但我认为这是当前框架的限制。