Vue: A new way can create component tree simply

[pea3nut]

What problem does this feature solve?

Since many components are deeply nested, I propose a simple way which could reduce the heavily nested structure when the parent component has one child only.

What does the proposed API look like?

Here is the code generally looks like:

<make-checkable :checked="checked">
    <with-animation type="fade" :when="checked">
        <blink-that spend="slow">Check Me</blink-that>
    </with-animation>
</make-checkable>

Inspired by angular and pipeline, maybe we should implement the same feature in this way:

<blink-that
    spend="slow"
    v-tag:with-animation
    type="fade"
    :when="checked"
    v-tag:make-checkable
    :checked="checked"
>Check Me</blink-that>

How about that?

Although the attributes are unordered, we can use that in SFC only like single tag <component />.

[raihle]

I don't like this.

• YMMV, but I don't find myself writing components like this very often. Usually there are several children or some other complicating factor.
• It's another difference between the various ways to define templates
• Fragments of code are now harder to scan, reorganize, and reuse
• It uses more vertical space if you include all of the line-breaks, and is even less readable if you don't
• You haven't even saved much typing. In fact, if your editor auto-inserts closing tags I'm pretty sure you are now typing more

[yyx990803]

No.