Показывать слот только в том случае, если у него есть контент, когда у слота нет имени?

Question

Как ответили здесь , мы можем проверить, есть ли у слота контент или нет.Но я использую слот без имени:

<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

Почему вы не передаете это значение в качестве реквизита компоненту карты.

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

и в my-map добавьте prop:

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

Так что теперь вы просто проверяете, имеет ли someValue значение null:

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