Subscribe on changes!

If v-slot and prop are set, $slots.default() will not be available

avatar
Apr 30th 2021

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".

avatar
Apr 30th 2021

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

avatar
May 1st 2021

@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.