Skip to content

Instantly share code, notes, and snippets.

@yyx990803
Last active January 14, 2019 16:40
  • Star 0 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/c6a7f63219825cb90105aad1a8a17e3b to your computer and use it in GitHub Desktop.
Comparison of `slot-props`/`()` vs `slot-scope`
Proposed new usage - `()` is a shorthand of `slot-props`.
<!-- default slot with just text -->
<foo ()="foo">
{{ foo }}
</foo>
<!-- default slot with element -->
<foo ()="foo">
<div>
{{ foo }}
</div>
</foo>
<!-- nested default slots -->
<foo ()="foo">
<bar ()="bar">
<baz ()="baz">
{{ foo }} {{ bar }} {{ baz }}
</baz>
</bar>
</foo>
<!-- named slots, text-only -->
<foo>
<template (one)="one">
{{ one }}
</template>
<template (two)="two">
{{ two }}
</template>
</foo>
<!-- named slots, elements -->
<foo>
<template (one)="one">
<div>{{ one }}</div>
</template>
<template (two)="two">
<div>{{ two }}</div>
</template>
</foo>
<!-- nested named/default slots -->
<foo>
<template (one)="one">
<bar ()="bar">
{{ one }} {{ bar }}
</bar>
</template>
<template (two)="two">
<bar ()="bar">
{{ two }} {{ bar }}
</bar>
</template>
</foo>
Current 2.5 API
<!-- default slot with just text -->
<foo>
<template slot-scope="foo">
{{ foo }}
</template>
</foo>
<!-- default slot with element -->
<foo>
<div slot-scope="foo">
{{ foo }}
</div>
</foo>
<!-- nested default slots -->
<foo>
<bar slot-scope="foo">
<baz slot-scope="bar">
<template slot-scope="baz">
{{ foo }} {{ bar }} {{ baz }}
</template>
</baz>
</bar>
</foo>
<!-- named slots, text only -->
<foo>
<template slot="one" slot-scope="one">
{{ one }}
</template>
<template slot="two" slot-scope="two">
{{ two }}
</template>
</foo>
<!-- named slots, elements -->
<foo>
<div slot="one" slot-scope="one">
{{ one }}
</div>
<div slot="two" slot-scope="two">
{{ two }}
</div>
</foo>
<!-- nested named/default slots -->
<foo>
<bar slot="one" slot-scope="one">
<template slot-scope="bar">
{{ one }} {{ bar }}
</template>
</bar>
<bar slot="two" slot-scope="two">
<template slot-scope="bar">
{{ two }} {{ bar }}
</template>
</bar>
</foo>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment