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

Posted 2023-02-22

【中文标题】仅在未给出插槽时添加 v-html 属性

【英文标题】：Add v-html attribute only if slot not given

【发布时间】：2020-02-24 13:40:52

【问题描述】：

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

<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呢？

【问题讨论】：

这能回答你的问题吗？ VueJS conditionally add an attribute for an element

不，除了匹配关键词之外，我看不出它有什么关联。仔细阅读我的帖子，你会发现它是一个不同的问题。

【参考方案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>

【讨论】：

这与我上面解释此解决方案的第二个代码示例不同，但需要注意的是，将添加不必要的元素（在我的情况下为 ，在您的情况下为 ）。这就是我不喜欢那个解决方案的地方，我一直在寻找一个没有不必要添加元素的解决方案。

@BrobicVripiat 使用第 3 行，然后使用 formatField(row, col) 。在您需要的formatField 方法return 字符串中。