Question

我正在使用vue构建一个表，我使用插槽来进行自定义格式化。 F.E.表（它是一个组件）使用thead - 组件，其中每个th是一个范围/命名槽。为插槽指定模板只能从父节点到子节点（或者似乎 - vm.$scopedSlots对于thead - 组件是空的）。

这是它的外观概述：

// in index.html
<my-table :data="data">
  <template name="col1-header" props="column">
    <th style="colour: blue;">{{ column.name }}</th>
  </template>
</my-table

// in my-table component
<template>
  <table>
    <my-thead :columns="columns">
    </my-thead>
    // tr: v-for over data
  </table>
</template>

// in my-thead component
<template>
  <thead>
    <tr>
      <slot :name="column.name + '-header'" :item="column" v-for="column in columns">
        <th>{{ column.name }}</th>
      </slot>
    </tr>
  </thead
</template>

使用template没有用，因为它似乎只适用于my-table而不是my-thead。使用slot中定义的my-thead的唯一方法是，如果我在my-table - 组件中添加模板，但我需要在组件外部指定它们。

有没有办法在将my-table用于my-thead组件时传递指定的模板？正如我已经提到的，我尝试使用vm.$scopedSlots，但此属性是只读的，无法在my-thead组件上设置。我可以访问父$scopedSlots的{{1}}。我还尝试在vm - 组件中使用slot和template以某种方式将模板传递给孩子，但这也不起作用。

Answer 1

我必须为此问题创建github issue。根据评论，有多种方法可以解决这个问题：

使用渲染函数将插槽传递给子节点，如下所示，设置scopedSlot属性，或使用属性传递scopedSlots，如图所示{{3} }。或者使用版本2.2.0中添加的provide/inject机制来设置scopedSlots（我还没有尝试过）。

render (h) {
  return h('child', {
    scopedSlots: this.$scopedSlots
  })
}

vuejs - 将范围模板传递给多个子级别

1 个答案: