时间戳

首页 > 解决方案 > 仅在有内容时才显示插槽，当插槽没有名称时？

vue.js - 仅在有内容时才显示插槽，当插槽没有名称时？

问题描述

正如这里所回答的，我们可以检查一个插槽是否有内容。但我正在使用一个没有名字的插槽：

<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>

当组件没有价值时，我怎么能不显示它？

标签： vue.jsvuejs2

解决方案

所有插槽都有一个名称。如果你没有明确地给它一个名字，那么它就会被调用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>

推荐阅读