vue.js - 确定插槽内容是否为 null 或为空

Question

我有一个小加载组件，我希望其默认文本为“正在加载...”。槽的好候选，所以我有这样的东西作为我的模板:

<p class="loading"><i class="fa fa-spinner fa-spin"></i><slot>Loading...</slot></p>

这让我可以更改加载消息，例如<loading>Searching...</loading> .不过，我想要的行为不仅是在没有提供插槽内容时显示默认消息，而且在插槽内容为空或空白时也显示默认消息。目前，如果我这样做，例如<loading>{{loadingMessage}}</loading>并且 loadingMessage 为 null，不显示任何文本(我希望显示默认文本的位置)。所以理想情况下我需要测试 this.$slots.default .这告诉我是否传入了内容，但我如何找到它是否为空？ this.$slots.default.text返回未定义。

Answer 1

您需要一个计算属性来检查 this.$slots .使用默认插槽，您会检查 this.$slots.default ，并用命名槽替换 default与插槽名称。

computed: {
  slotPassed() {
    return !!this.$slots.default[0].text.length
  }
}

然后在你的模板中使用它:

<template>
  <div>
    <slot v-if="slotPassed">Loading...</slot>
    <p v-else>Searching...</p>
  </div>
</template>

可以看一个小例子here .请注意后备内容的显示方式，而不是插槽内的“默认内容”。

---

编辑:我的措辞本来可以更好。您需要做的是检查 $slots.X值，但计算属性是检查该值的一种方式。您也可以只在模板中编写插槽检查:

<template>
  <div>
    <slot v-if="!!$slots.default[0].text">Loading...</slot>
    <p v-else>Searching...</p>
  </div>
</template>

---

编辑 2:正如@GoogleMac 在评论中指出的那样，对于无渲染组件(例如 <transition> 、 <keep-alive> ……)，检查插槽的文本属性失败，因此检查他们建议的是:

!!this.$slots.default && !!this.$slots.default[0]

// or..
!!(this.$slots.default || [])[0]