Question

如回答here所示，我们可以检查广告位是否包含内容。但是我正在使用一个没有名称的插槽：

<template>
    <div id="map" v-if="!isValueNull">
        <div id="map-key">{{ name }}</div>
        <div id="map-value">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            name: {type: String, default: null}
        },
        computed: {
            isValueNull() {
                console.log(this.$slots)
                return false;
            }
        }
    }
</script>

我正在这样使用：

<my-map name="someName">{{someValue}}</my-map>

当该组件没有值时如何显示？

Answer 1

所有插槽都有一个名称。如果您未明确为其命名，则其名称为default。

因此您可以检查$slots.default。

不过请注意。 $slots是非反应性的，因此当它更改时，不会使使用它的任何计算的属性无效。但是，它将触发组件的重新渲染，因此，如果直接在模板中或通过某种方法使用它，它应该可以正常工作。

下面是一个示例，说明当插槽的内容更改时，计算属性的缓存不会无效。

const child = {
  template: `
    <div>
      <div>computedHasSlotContent: {{ computedHasSlotContent }}</div>
      <div>methodHasSlotContent: {{ methodHasSlotContent() }}</div>
      <slot></slot>
    </div>
  `,
  
  computed: {
    computedHasSlotContent () {
      return !!this.$slots.default
    }
  },
  
  methods: {
    methodHasSlotContent () {
      return !!this.$slots.default
    }
  }
}

new Vue({
  components: {
    child
  },
  
  el: '#app',
  
  data () {
    return {
      show: true
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

<div id="app">
  <button @click="show = !show">Toggle</button>
  <child>
    <p v-if="show">Child text</p>
  </child>
</div>

Answer 2

为什么不将该值作为prop传递给map组件。

<my-map :someValue="someValue" name="someName">{{someValue}}</my-map>

，然后在我的地图中添加道具：

   props: {
            someValue:{default: null},
        },

所以现在您只需检查someValue是否为空：

 <div id="map" v-if="!someValue">
    ...
</div

仅在显示插槽中显示内容时显示，而插槽没有名称时？

2 个答案: