If v-slot and prop are set, $slots.default() will not be available
Version
3.0.11
Reproduction link
https://codepen.io/jsqy/pen/dyNBNjR
Steps to reproduce
Normal: <jsqy v-slot="data"><tsub></tsub></jsqy>
Abnormal: <jsqy v-slot="data"><tsub :value="data.value"></tsub></jsqy>
Look "codepen" link, You can click on the button above and find that everything is fine, but clicking on the button below will make an error.
What is expected?
There should be no errors, just like the button above.
What is actually happening?
$slots.default() cannot be used simply because ":value" is set to "data.value".
You need to pass the data object if you manually call $slots.default({ value: 'jsqy' })
. That's why you see an error: it's the template of <tsub>
trying to read data.value
@posva I'm so sorry, because I'm not sure yet, and I've looked through the documents several times in detail to confirm it to you again.
If it's not v-slot data, then there won't be any problems.
I've revised the example, click the second button: https://codepen.io/jsqy/pen/dyNBNjR
The way you say it works is effective, but the reality is more complex, such as this example: https://codepen.io/jsqy/pen/eYgwPxQ
It is likely that the parameters passed in by slot are also available from other components, so I'm still not sure what value should be passed in the default method. I don't know if there's a way to get a return value like an incoming value of a not v-slot's data, it works like the first link to the second button.
The component's layout like it:
<div><tsub v-slot="data"><slot :val="data.v"></slot></tsub><input type="button" @click="show" value="Show $slots.default()" /></div>
And how to call $slots.default({ ??? });
Thank you so much.