javascript - 在孙子组件中使用命名插槽

Question

我创建了一个扩展 Bootstrap Vue Table 组件的全局组件，为每个名为 VTable 的表创建了一个自定义模板。

Bootstrap Vue Table 组件可以使用命名插槽来自定义数据呈现。

<template>
  <div>
    <b-table
      :items="items"
      :fields="fields"
      ...
    >
    </b-table>
  </div>
</template>

<script>
  import Table from 'bootstrap-vue/es/components/table/table';

  export default {
    name: 'Vtable',
    extends: Table,
    ...
  };
</script>

我在另一个使用新的自定义 HTML 标记的组件中使用全局表组件。

<v-table
  v-if="items"
  :items="items"
  :fields="fields"
  ...
>
  <template
    slot="timestamp"
    slot-scope="data"
  >
    ...
  </template>
  <template
    slot="row-details"
    slot-scope="row"
  >
    ...
  </template>
</v-table>

问题是 VTable 组件中使用的命名槽没有显示在子组件中。

我还尝试在全局组件中创建一个自定义命名插槽

<template>
  <div>
    <b-table
      ...
    >
      <slot name="customRendering"/>
    </b-table>
  </div>
</template>

像这样使用它

<v-table
  ...
>
  <template slot="customRendering">
    <template
      slot="timestamp"
      slot-scope="data"
    >
      ...
    </template>
    <template
      slot="row-details"
      slot-scope="row"
    >
       ...
    </template>
  </template>
</v-table>

没有成功

这可以简单地使用在孙子组件中定义的命名插槽，还是完全不可能？我还想遍历 customRendering 插槽值以动态重新创建 Bootstrap Vue 表插槽。

Answer 1

在您的 vtable 组件中，您可以定义要传递的插槽。

因此，如果您有一个组件 my-component 和一个子组件 -> vtable 扩展 -> btable...

你可以在你的 vtable 组件中定义你想要传递的插槽

<template
  slot="row-details"
  slot-scope="row"
>
    <slot name="row-details"/>
</template>

这是 https://jsfiddle.net/eywraw8t/308324/ 的一个简单示例

您可能需要为每个插槽进行设置。如果您想动态传递所有这些槽(不知道它们的名字)，渲染函数会更好，因为您可以遍历父项发送的所有槽，并将它们传递给子项。

文档:https://v2.vuejs.org/v2/guide/render-function.html#Slots

具有将向下传递作用域插槽的呈现功能的组件示例

const Bar = Vue.component('vtable', {
  render(h) {
    const children = Object.keys(this.$slots).map(slot => h('template', { slot }, this.$slots[slot]))
    return h('wrapper', [
      h('foo', {
        attrs: this.$attrs,
        on: this.$listeners,
        scopedSlots: this.$scopedSlots,
      }, children)
    ])
  }
});