首页 文章

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

提问于
浏览 次
1

我'm having a case in VueJS 2 where there'是3级组合的组件（祖父母 - 孩子 - 孙子），我需要将模板/插槽从祖父母传递给孙子（这是来自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>

子组件：

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

孙子组件：

这是来自Bootstrap Vue的 <b-table> （https://bootstrap-vue.js.org/docs/components/table）

因此，当Bootstrap Vue文档代表时，我可以将 <template> 传递给 <b-table> ，但我想首先将它从祖父母传递给孩子，然后从孩子传递到 <b-table> .

javascript vue.js vuejs2 vue-component bootstrap-vue

1 回答

  • 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
        }
    }
}
    回复于

相关问题