vue.js - Vue js 2.6：组件将一个插槽 vnodes 作为道具传递给另一个插槽以进行渲染 | 将数据从一个插槽传输到另一个插槽的组件

Question

（上下文）我想做这样的事情：https ://www.csscodelab.com/table-in-vuejs-toggle-sub-row/ 一个可折叠的表格，其中的行和子行具有额外的数据。当我调整页面大小时，我希望我的子行逐渐从表 tds 中自动生成。（结束语境）

简短的问题： 我是否可以拥有一个具有渲染功能的组件，该功能从一个插槽获取 vnode 并自动将它们作为道具传递到另一个插槽，该插槽将在预处理后渲染它们？

长问题： 我有 2 个组件：c-table和c-table-row. c-table有 2 个插槽：标题和默认值。两个插槽都必须传递一个c-table-row. c-table增益和对象数组作为数据并循环每个要渲染的默认插槽项。此外，c-table负责提取代表 slot.heading tds 的 vnode 数组。c-table-row将负责折叠特定的 tds 索引，但必须有权访问标题槽 vnode 以在折叠模式下使用数据呈现它们。我已经设法在c-table-row渲染函数中做到这一点，但它仍然需要一个标题数组。

// c-table.vue
export default {
  data: () => ({
    heading: [],
    collapsed: []
  }),
  render(h) { cl('table')
      let slots = this.$slots;
      let heading = slots.heading;
      let headingContents = heading[0].children.map(h => h.children);
      heading = h('thead', heading);
      let rows = slots.default();
      this.$set(this.$data, 'heading', headingContents);
      
      return h('table', [heading, h('tbody', rows)]);
  },
  beforeCreate() {
    console.log('table.beforeCreate')
  }
}

// index.js
<c-table :items="items">
  <c-table-row slot="heading">
    <td>ID</td>
    <td>name</td>
  </c-table-row>
  <c-table-row slot="default" slot-scope="{item}">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
  </c-table-row>
</c-table>

我知道

父模板中的所有内容都在父范围内编译；子模板中的所有内容都在子范围内编译。并且似乎c-table-row是之前渲染的c-table。

有什么方法可以从c-table渲染函数 vnodes 数组从 slot.heading 传递到 slot.default 作为道具，而不使用类似的东西：

  <c-table-row slot="default" slot-scope="{item, heading} (automate this expression in c-table render function ->> :heading="heading" <<-)>
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
  </c-table-row>

标签： vue.jsvuejs2vue-component