Yet another prop and event handler shorthand

[zsakowitz]

What problem does this feature solve?

I commonly need to pass props down from one component to a child component. For example, I recently wanted to pass a disabled prop to a subcomponent called . I feel that writing

<Button :disabled="disabled" />

feels too cluttered. When people have suggested this elsewhere, some recommend using

<Button v-bind="{ disabled "} />

The problem with this approach is that an unnecessary v-bind is introduced which could be omitted.

What does the proposed API look like?

I understand that the shorthand syntax

<Button :disabled @click />

has been scrapped many, many, many, many, many, many, many (holy moly, the list just keeps going) times in the past, but I propose a new syntax similar to Svelte's prop shorthands.

<Button {disabled} {@click} />

The above syntaxes are similar to the existing object shorthand in JavaScript, so it would feel familiar to new developers. Furthermore, it would not be a breaking change (compared to #5835) since Vue props rarely use curly braces in their names.

If possible, I would also wish for a shorthand such as

<Button {disabled, @click} />

to be allowed, but I realize that the space in the attribute name prevents it from being valid HTML.

[posva]

This should go in the vue/rfcs repo. Check there if there is an already open proposal.