Как я могу передать шаблон (слот) от дедушкиного компонента к внуку в VueJS?

У меня есть случай в VueJS 2, где есть компонент трехуровневой композиции (дедушка - потомок - внук), и мне нужно передать шаблон / слот от дедушки до внука (это один компонент 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>.

Ruy Garcia 11.03.2018 источник

comment

Я не вижу слотов. Разве не должно быть? - acdcjunior 11.03.2018

Ответы (1)

arrow_upward
1
arrow_downward

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