Как решить этот warning в render()?

Question

[Айнур Ярулин]

Vue 3
Здравствуйте, можете подсказать как убрать этот варнинг:

Non-function value encountered for default slot. Prefer function slots for better performance.

// DeepL переводчик:
Нефункциональное значение, встречающееся для слота по умолчанию. 
Предпочтительные функциональные слоты для лучшей производительности

Он происходит из-за подобного кусочка кода:

export default {
  render() {
    return [
      h('ul', this.$slots.default().map(slot => h('li', slot)))
    ]
  }
}

Как я понял, он предлагает мне что-то сделать для лучшей производительности,
но я не понимаю что именно

Comments

[Михаил]

не вызывайте default как функцию

[Айнур Ярулин]

Михаил, тогда не будет работать)

Answer 1

[Aetae]

this.$scopedSlots

Comments

[Айнур Ярулин]

Не, к сожалению не помогает

[Aetae]

export default {
  render() {
    return [
      h('ul', (props) => this.$scopedSlots.default(props).map(slot => h('li', slot)))
    ]
  }
}

[Andrew]

Aetae ваше решение не будет работать в vue 3.

https://v3.vuejs.org/guide/migration/slots-unifica...

[Aetae]

Shatge, пометка про в vue3 появилась после ответа.

[Andrew]

Aetae, ок.

Answer 2

[Andrew]

В vue 3 scoped slots объединили в slots.
Теперь нужно писать $slots вместо $scopedSlots.

https://v3.vuejs.org/guide/migration/slots-unifica...