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 内部范围内的 if else 条件：

<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

Answer 3

解决方案是一种变通方法：

为每个可能的用例创建 2 个不同的 SFC 并进行条件渲染。

Vuetify 示例：

// App.vue
<div>
  <ListMD v-if="this.$vuetify.breakpoint.name === 'md'" />
  <ListXS v-if="this.$vuetify.breakpoint.name === 'xs'" /> 
</div>