После добавления v-bind с slot, он пропадает из $slots?

Question

[Владимир Голубь]

Vue 2.*

Простой компонент

<template>
  <div>
    <div v-if="$slots.header">
      <slot
        name="header"
        v-bind:header="user"
      ></slot>
    </div>
    <div v-else>
      Заголовок не передан
    </div>
  </div>
</template>

<script>
export default {
  name: "TestComponent",
  data: function () {
    return {
      user: {
        name: 'Dima'
      }
    }
  }
}
</script>

Пример использования со slot

<TestComponent>
      <template v-slot:header="{ user }">
        <h1>{{ user.name }}</h1>
      </template>
    </TestComponent>

Получаю заголовок не передан, проблема возникает после добавления v-bind ?

Answer 1

[0xD34F]

Конечно пропадает, он теперь в $scopedSlots.

Ну и разберитесь с именами:

v-bind:header="user"

v-slot:header="{ user }"

Привязываете параметр с именем header, а использовать пытаетесь user.