You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: active-rfcs/0000-slot-syntax-shorthand.md
+16-38Lines changed: 16 additions & 38 deletions
Original file line number
Diff line number
Diff line change
@@ -10,11 +10,7 @@ Add shorthand syntax for the `v-slot` syntax proposed in [rfc-0001](https://gith
10
10
# Basic example
11
11
12
12
```html
13
-
<foo#="{ msg }">
14
-
{{ msg }}
15
-
</foo>
16
-
17
-
<foo>
13
+
<foo>
18
14
<template#header="{ msg }">
19
15
Message from header: {{ msg }}
20
16
</template>
@@ -67,22 +63,6 @@ The shorthand helps slot names to be more easily scan-able:
67
63
68
64
The shorthand follows very similar rules to the shorthand of `v-bind` and `v-on`: replace the directive name plus the colon with the shorthand symbol (`#`).
69
65
70
-
For default slot on component:
71
-
72
-
```html
73
-
<!-- full syntax -->
74
-
<foov-slot="{ msg }">
75
-
{{ msg }}
76
-
</foo>
77
-
78
-
<!-- shorthand -->
79
-
<foo#="{ msg }">
80
-
{{ msg }}
81
-
</foo>
82
-
```
83
-
84
-
For named slots:
85
-
86
66
```html
87
67
<!-- full syntax -->
88
68
<foo>
@@ -107,6 +87,18 @@ For named slots:
107
87
</foo>
108
88
```
109
89
90
+
**Similar to `v-bind` and `v-on`, the shorthand only works when an argument is present. This means `v-slot` without an argument cannot be simplified to `#=`.** For default slots, either the full syntax (`v-slot`) or an explicit name (`#default`) should be used.
91
+
92
+
```html
93
+
<foov-slot="{ msg }">
94
+
{{ msg }}
95
+
</foo>
96
+
97
+
<foo#default="{ msg }">
98
+
{{ msg }}
99
+
</foo>
100
+
```
101
+
110
102
The choice of `#` is a selection based on the feedback collected in the previous RFC. It holds a resemblance to the id selector in CSS and translates quite well conceptually to stand for a slot's name.
111
103
112
104
Some example usage in a real-world library that relies on scoped slots ([vue-promised](https://github.com/posva/vue-promised)):
@@ -117,7 +109,7 @@ Some example usage in a real-world library that relies on scoped slots ([vue-pro
117
109
<p>Loading...</p>
118
110
</template>
119
111
120
-
<template#="users">
112
+
<template#default="users">
121
113
<ul>
122
114
<liv-for="user in users">{{ user.name }}</li>
123
115
</ul>
@@ -131,16 +123,6 @@ Some example usage in a real-world library that relies on scoped slots ([vue-pro
131
123
132
124
# Drawbacks
133
125
134
-
- The `#` symbol doesn't translate that well conceptually when used on a component for default slot:
135
-
136
-
```html
137
-
<foo#="{ msg }">
138
-
{{ msg }}
139
-
</foo>
140
-
```
141
-
142
-
Maybe we only support the shorthand for named slots? For default slot usage on component, full `v-slot` usage is required. It would also be consistent with `v-on` and `v-bind` where the shorthand does not apply if there is no argument.
143
-
144
126
- Some may argue that slots are not that commonly used and therefore don't really need a shorthand, and it could result in extra learning curve for beginners. In response to that:
145
127
146
128
1. I believe scoped slot is an important mechanism for building 3rd party component suites that are highly customizable and composable. I think we will see more component libraries relying on slots for customization and composition in the future. For a user using such a component library, a shorthand will become quite valuable (as demonstrated in the examples).
@@ -152,11 +134,7 @@ Some example usage in a real-world library that relies on scoped slots ([vue-pro
152
134
Some alternative symbols have been presented and discussed in the previous RFC. The only other one with similarly positive interest is `&`:
153
135
154
136
```html
155
-
<foo&="{ msg }">
156
-
{{ msg }}
157
-
</foo>
158
-
159
-
<foo>
137
+
<foo>
160
138
<template&header="{ msg }">
161
139
Message from header: {{ msg }}
162
140
</template>
@@ -173,4 +151,4 @@ This should be a natural extension on top of the new `v-slot` syntax. Ideally, w
0 commit comments