仅在未给出插槽时添加 v-html 属性

Question

在组件片段中考虑以下内容：

<tr v-for="row in rows" :key="row[rowKey]">
   <td v-for="col in cols">
      <slot v-if="col.bSlot" :name="col.bSlot" :row="row"></slot>
      <template v-else v-html="formatField(row, col)"></template>
   </td>
</tr>

如果给定，我想渲染一个槽，如果没有，我想渲染一个格式化函数返回的字符串，未转义。这不起作用，因为我发现 v-html 不适用于模板。以下工作，但您需要额外的我不想要的不必要的 div 标签：

<td v-for="col in cols">
   <slot v-if="col.bSlot" :name="col.bSlot" :row="row"></slot>
   <div v-else v-html="formatField(row, col)"></div>
</td>

如果这仍然有效但已被弃用，那就太好了：

<td v-for="col in cols">
   <slot v-if="col.bSlot" :name="col.bSlot" :row="row"></slot>
   <template v-else>
      {{{formatField(row, col)}}}
   </template>
</td>

我剩下的唯一其他选项是这个，但是因为没有放置 v-else 的位置，所以如果给定了一个插槽，我让 formatField() 不返回任何内容：

<td v-for="col in cols" v-html="formatField(row, col)">
   <slot v-if="col.bSlot" :name="col.bSlot" :row="row"></slot>
</td>

formatField(row, col) {
   if (col.bSlot) return;  // also tried returning null, undefined, and ''
   ...
}

但是，现在插槽在提供时不会呈现。如果提供了 v-html，Vue 似乎会忽略该插槽。那么在不提供col.bSlot的情况下怎么不提供v-html呢？

Answer 1

如果没有给出槽位，你可以设置默认值 - Fallback-Content

这个怎么样：

1 <td v-for="col in cols">
2  <slot :name="col.bSlot" :row="row">
3     {{ formatField(row, col) }}
4     // <-- this is a comment
5     // <span v-html="formatField(row, col)"></span>
6   </slot>
7 </td>