Version

3.1.2

Reproduction link

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbiAgaW1wb3J0IFBhcmVudCBmcm9tICcuL1BhcmVudC52dWUnXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuXHQ8UGFyZW50PlxuICAgIDx0ZW1wbGF0ZSAjb3B0aW9uPVwieyB2YWx1ZSB9XCI+XG4gICAgXHR7eyB2YWx1ZSB9fSt7eyB2YWx1ZSB9fVxuICAgIDwvdGVtcGxhdGU+XG4gIDwvUGFyZW50PlxuPC90ZW1wbGF0ZT5cblxuIiwiQ2hpbGQudnVlIjoiPHRlbXBsYXRlPlxuXHQ8c2xvdCB2YWx1ZT1cImZvb1wiPjwvc2xvdD5cbjwvdGVtcGxhdGU+IiwiUGFyZW50LnZ1ZSI6IjxzY3JpcHQgc2V0dXA+XG4gIGltcG9ydCBDaGlsZCBmcm9tICcuL0NoaWxkLnZ1ZSdcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxDaGlsZD5cbiAgICA8c2xvdCBuYW1lPVwib3B0aW9uXCI+PC9zbG90PlxuICA8L0NoaWxkPlxuPC90ZW1wbGF0ZT5cbiJ9

Steps to reproduce

check reproduction

What is expected?

option slot in app.vue should receive props from Child component and render foo+foo

What is actually happening?

Forwarded slots don't receive props from Child component. Take a look at the generated code for Parent component.

 default: _withCtx(() => [
  _renderSlot(_ctx.$slots, "option")
]),

There's a workaround for this issue but I wonder if can be avoided?

<Child>
  <template #default="props">
    <slot v-bind="props" name="option"></slot>
  </template>
</Child>

// Edit: hmm I see it currently works like in vue 2, so I assume changing this would be a breaking change?

No, it can't be avoided, and is no workaround - this is how slots work. In this specific case, you can make it a tad more succinct as Child only has one default slot:

<script setup>
  import Child from './Child.vue'
</script>

<template>
  <Child v-slot="{ value }">
    <slot name="option" :value="value"></slot>
  </Child>
</template>