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的情况下，否则使用scope可以正常工作。

Answer 1

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

如果条件＃1移至<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对其进行了修复，我在官方文档和在线文档中都进行了搜索，但是没有任何线索。

Answer 2

在Vue.js组件中，您不能有多个模板标签。

为什么不对动态组件使用'is'属性？

<template>
   <div :is='my-component'></div>
</template>

因此您可以动态地加载组件。

https://vuejs.org/v2/guide/components.html#Dynamic-Components