确定插槽内容是空还是空

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为null,则不显示任何文本(我希望显示默认文本).理想情况下我需要测试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>

你可以在这里看到一个小例子.请注意如何显示后备内容,而不是插槽内的"默认内容".

编辑:我的措辞可能会更好.您需要做的是检查$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，任何computed属性都不会更新。

解决方案是不依赖于computed值，而是依赖于createdand beforeUpdated（正如 @MathewSonke 指出的那样）：

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

注意：我找不到任何关于此的文档，因此请持保留态度，但似乎在我非常有限的测试中有效。