Skip to content

Instantly share code, notes, and snippets.

@yyx990803
Created January 21, 2019 17:19
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save yyx990803/971e31b08b928c7886dde797291e59ec to your computer and use it in GitHub Desktop.
<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>
@yyx990803
Copy link
Author

yyx990803 commented Jan 21, 2019

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

@jamesmh
Copy link

jamesmh commented Jan 21, 2019

Love it

@birante
Copy link

birante commented Jan 21, 2019

Simply Love it too

@mistyharsh
Copy link

This is great. It cannot get any better.

@musukvl
Copy link

musukvl commented Jan 21, 2019

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

@cristijora
Copy link

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

@dylanized
Copy link

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

@dskecse
Copy link

dskecse commented Jan 21, 2019

I agree with @cristijora

@yyx990803
Copy link
Author

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

@kode8
Copy link

kode8 commented Jan 21, 2019

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

@kode8
Copy link

kode8 commented Jan 21, 2019

@slot:header ?

@sombriks
Copy link

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

@OwenMelbz
Copy link

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

@brandonpittman
Copy link

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

@Lee182
Copy link

Lee182 commented Jan 21, 2019

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>

@comfuture
Copy link

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

@ChangJoo-Park
Copy link

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

👍

@yyx990803
Copy link
Author

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.

@nkostadinov
Copy link

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

@kahl-dev
Copy link

Awesome

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment