将类添加到插槽范围

Question

我正在创建一个表组件，我想让我的用户能够通过插槽添加他们的自定义<td>。所以我有：

<tbody>
  <tr v-for="(item, key) in items">
    <slot :item=item">
      <td v-for="(header, headerKey) in variableHeaders"
        :class="{
            veryImportantClass: condition > 5,
        }">
        {{item.text}}
      </td>
    </slot>
  </tr>
</tbody>

由于这段代码，我使用这个插槽：

<my-component
  :headers="headers"
  :items="items">
  <template slot-scope="prop">
    <td :class="{ aClassAddedByAUser: true }" v-for="(header, headerKey) in headers" ...>
      {{ prop.item.text }} with some text
    </td>
  </template>
</my-component>

问题是，veryImportantClass类对于我的组件是强制性的，但我想避免让我的用户在他们创建的slot中输入它（以降低复杂性）

有没有办法简单地将这个类添加到我的用户给出的所有<td>，这要归功于这个范围？

Answer 1

您可以使用mounted()生命周期钩子使用普通的JavaScript函数添加类。以下是您可以无条件地将其添加到所有单元格的方法。如果您只需要将其添加到某些单元格，请相应地进行调整。

mounted() {
    // wait a tick to ensure all child components have rendered
    this.$nextTick(() => {
        this.$el.querySelectorAll("td")
            .forEach(td => {
                td.classList.add("veryImportantClass");
            }
        }
    }
}

如果插槽内容将发生变化，您可能需要在updated()上执行类似的操作。

注意：这确实假设父插入插槽中的<td>元素，这是不能保证的。但由于这会导致无效的HTML，您可能会习惯于这种假设