确定槽内容是空还是空

Question

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

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

这使我可以更改加载消息，例如<loading>Searching...</loading>。不过，我想要的行为不仅是在未提供插槽内容时显示默认消息，而且在插槽内容为空或空白时显示默认消息。目前，如果我执行例如<loading>{{loadingMessage}}</loading> 并且 loadingMessage 为空，则不会显示任何文本（我希望显示默认文本）。所以理想情况下我需要测试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 在 cmets 中指出的那样，对于无渲染组件（例如 <transition>、<keep-alive>、...），检查插槽的文本属性失败，因此检查他们建议的是：

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

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

Answer 2

@kano 的回答效果很好，但有个问题：this.$slots 不是反应式的，所以如果它开始是false，然后变成true，任何computed 属性都不会更新。

解决方案是不依赖computed 值，而是依赖created 和beforeUpdated (as @MathewSonke points out)：

export default {
  name: "YourComponentWithDynamicSlot",
  data() {
    return {
      showFooter: false,
      showHeader: false,
    };
  },
  created() {
    this.setShowSlots();
  },
  beforeUpdate() {
    this.setShowSlots();
  },
  methods: {
    setShowSlots() {
      this.showFooter = this.$slots.footer?.[0];
      this.showHeader = this.$slots.header?.[0];
    },
  },
};

更新：Vue 3（组合 API）

对于 Vue 3，检查插槽是否有内容的方式似乎发生了变化（使用新的组合 API）：

import { computed, defineComponent } from "vue";

export default defineComponent({
  setup(_, { slots }) {
    const showHeader = computed(() => !!slots.header);

    return {
      showHeader,
    };
  },
});

注意：我找不到任何关于此的文档，所以请稍加注意，但似乎在我非常有限的测试中有效。