syntax.vue

<SomeComponent>
  <template #header>
    <div>Header message</div>
  </template>

  <template #item="{ item }">
    <div class="item">{{ item.text }}</div>
  </template>

  <template #footer>
    <div>Footer message</div>
  </template>
</SomeComponent>

(Try to take a look at the syntax and make a best guess first before reading on!)

---

If you saw this from Twitter, please vote with your initial guess.

This is a shorthand for the new component slot syntax that's currently being discussed in an RFC which in turn is based on a previous RFC about the new slot syntax itself.

The new base slot syntax is:

<SomeComponent>
  <template v-slot:header>
    <div>Header message</div>
  </template>
</SomeComponent>

So #header is a shorthand for v-slot:header just like @click is short for v-on:click.

Love it

Simply Love it too

This is great. It cannot get any better.

"#" is id, better to use some other symbol.

Agree that # might be confused with css id selector.
In my opinion, this is a nice "optional" syntax. Would prefer explicit slot declaration though.

I agree with @cristijora. Given this optional shorthand syntax, I would still probably use the explicit style

I agree with @cristijora

It is an optional syntax. Please read the linked RFCs.

I guessed at the wrapper being a div id=“header” as this is what is used for href anchor.

@slot:header ?

quite nice as long it can be applied to a simple div or p too

I felt that this looks more like a ref=“header” as commonly use ID to identify something, like with the $refs is to identity something

Had a feeling it was for slots. Liked the (version)={ more }.

My initial thoughts that it was object destructing and that all the key values in header would be binded as attribute property.
On seconds thoughs reading the purpose I think # clashes with css for id.

Maybe something like a ^ hat symbol be better because its pointing to something outside the component.

<SomeComponent>
  <template ^header>
    <div>Header message</div>
  </template>

  <template ^item="{ item }">
    <div class="item">{{ item.text }}</div>
  </template>

  <template ^footer>
    <div>Footer message</div>
  </template>
</SomeComponent>

how about <template &foo>?
& symbol often used as meaning reference in other language. :)

how about <template &foo>?
& symbol often used as meaning reference in other language. :)

👍

FYI - please don't discuss alternatives here, Gist doesn't have comment notifications and this is NOT the RFC itself.

Alternative symbols have been extensively discussed in the RFC threads and comments here are unlikely to be considered.

If you have strong opinions, participate in the discussions in the rfcs repo instead.

Looks great , guessed it right away. The # is good because it is associated with id. this will be a great shorthand addition

Awesome