javascript - vue 中的条件作用域插槽模板

Question

我不能做这样的事情吗？

<template v-if="options.columns">
  one thing...
</template>
<template v-else slot-scope="scope">
  something else. scope doesn't work here. :(
</template>

当我尝试这样做时， scope变得不确定。当我删除 v-if, else 并使用 scope它按预期工作。

Answer 1

我正面临着完全相同的问题，更糟糕的是，我的正在默默地失败 - 我没有看到任何错误。

解决方案 #1 将 if else 条件移至 <template> 的内部范围

正如 David Japan 所指出的，您可以在 slot-scope 的内部范围内检查是否有其他条件。 :

<template slot-scope="scope">
  <span v-if="options.columns">one thing...</span>
  <span v-else>something else.</span>
</template>

解决方案#2 使用 v-slot而不是 slot-scope

<template v-slot="scope" v-if="options.columns">
  one thing...
</template>
<template v-slot="scope" v-else>
  something else.
</template>

但是我不知道为什么 v-slot修复它，我在官方文档和在线搜索，但没有任何线索。