Question

我有一个小的Loading组件，我的默认文本是'Loading ...'。插槽的好候选者，所以我有这样的东西作为我的模板：

<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返回undefined。

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。注意如何显示后备内容而不是＆＃34;默认内容＆＃34;，它位于插槽内。

修改：我的措辞可能会更好。您需要要做的是检查$slots.X值，但计算属性是某种方式来检查它。您也可以在模板中编写插槽检查：

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

Answer 2

@kano的答案很好用，但是有一个陷阱：this.$slots不是被动的，所以如果它开始是false，然后变成true，则任何{{1} }属性不会更新。

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

beforeUpdated

更新：Vue 3（合成API）

对于Vue 3，似乎已经更改了检查广告位是否包含内容的方式（使用新的composition API）：

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];
    },
  },
};

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

确定插槽内容是空还是空

2 个答案:

更新：Vue 3（合成API）