v-bind different behavior with slot name
Vue version
https://github.com/vuejs/core/tree/a95e612
Link to minimal reproduction
Steps to reproduce
// work well, slot name customNamee
<slot
name="customNamee"
>
</slot>
// work well, slot name customNamee
<slot
:name="customNamee"
>
</slot>
// Deviate from expectations, work as name with deualt
<slot
:[`name`]="customNamee"
>
</slot>
// Deviate from expectations, work as name with deualt
<slot
v-bind="{
name: customNamee
}"
></slot>
What is expected?
all some, slot name with customNamee
What is actually happening?
different
System Info
No response
Any additional comments?
No response
@zhangenming The third gets converted to fourth one ie, third and fourth are same
<slot v-bind="{ name: customName }"></slot>
Here you are passing 'name' as a data to the slot content.
Also, your expression does not specify the slot name. which can be specified by 'name' attribute to slot tag. Since it is missing, by convention it is considering it as 'default'.
This is not a bug!
v-bind={key:x, ref:x}
Both key and ref are effective, so it is unreasonable for name alone not to be effective
The name of the slot is a special attribute. It is handled specially during compilation, so it cannot be added dynamically.
The name of the slot is a special attribute. It is handled specially during compilation, so it cannot be added dynamically.
At least this should work, It can be done at compile time
v-bind="{
name: customNamee
}"
></slot>```
@zhangenming Like @shaileshnighojkar said:
you are passing 'name' as a data to the slot content.
Most developers think so, don't they? It's technically possible, but it's not worth it and this change may even be a breaking change. IMO, If a slot has a name, it should be clearly defined, which is good practice.
In my opinion, v-bind={is,key,ref,name}, this all four should behave the same