Skip to content

Commit 802c7e4

Browse files
authored
docs: slots scope being exposed as "params" instead of "props"
* docs(migration): slots scope being exposed as "params" instead of "props * docs(guide): note about slot scope when not wrapped in template tag https://github.com/vuejs/test-utils/blob/39d86ad5abe71bac8d76c5b82f11f30225cf8673/src/utils/compileSlots.ts#L10 The only example provided used an explicit #default="params", but it doesn't mention that if you don't explicitly wrap it, the slot scope becomes also available as params. In VTU1, they were exposed as props, so i think it's better to be explicit about it.
1 parent 044958d commit 802c7e4

File tree

2 files changed

+30
-3
lines changed

2 files changed

+30
-3
lines changed

docs/guide/advanced/slots.md

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ test('layout full page layout', () => {
139139

140140
## Scoped Slots
141141

142-
[Scoped slots](https://v3.vuejs.org/guide/component-slots.html#scoped-slots) and bindings are also supported.
142+
[Scoped slots](https://v3.vuejs.org/guide/component-slots.html#scoped-slots) and bindings are also supported.
143143

144144
```js
145145
const ComponentWithSlots = {
@@ -158,8 +158,8 @@ const ComponentWithSlots = {
158158
test('scoped slots', () => {
159159
const wrapper = mount(ComponentWithSlots, {
160160
slots: {
161-
scoped: `<template #scoped="params">
162-
Hello {{ params.msg }}
161+
scoped: `<template #scoped="scope">
162+
Hello {{ scope.msg }}
163163
</template>
164164
`
165165
}
@@ -169,6 +169,19 @@ test('scoped slots', () => {
169169
})
170170
```
171171

172+
When using string templates for slot content, **if not explicitly defined using a wrapping `<template #scoped="scopeVar">` tag**, slot scope becomes available as a `params` object when the slot is evaluated.
173+
174+
```js
175+
test('scoped slots', () => {
176+
const wrapper = mount(ComponentWithSlots, {
177+
slots: {
178+
scoped: `Hello {{ params.msg }}` // no wrapping template tag provided, slot scope exposed as "params"
179+
}
180+
})
181+
182+
expect(wrapper.html()).toContain('Hello world')
183+
})
184+
172185
## Conclusion
173186

174187
- Use the `slots` mounting option to test components using `<slot>` are rendering content correctly.

docs/migration/index.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,20 @@ Vue 3 renamed the `vm.$destroy` to `vm.$unmount`. Vue Test Utils has followed su
217217
218218
Vue 3 united the `slot` and `scoped-slot` syntax under a single syntax, `v-slot`, which you can read about in the [the docs](https://v3.vuejs.org/guide/migration/slots-unification.html#overview). Since `slot` and `scoped-slot` are now merged, the `scopedSlots` mounting option is now deprecated - just use the `slots` mounting option for everything.
219219
220+
### `slots`‘s scope is now exposed as `params`
221+
222+
When using string templates for slot content, if not explicitly defined using a wrapping `<template #slot-name="scopeVar">` tag, slot scope becomes available as a `params` object when the slot is evaluated.
223+
224+
```diff
225+
shallowMount(Component, {
226+
- scopedSlots: {
227+
+ slots: {
228+
- default: '<p>{{props.index}},{{props.text}}</p>'
229+
+ default: '<p>{{params.index}},{{params.text}}</p>'
230+
}
231+
})
232+
````
233+
220234
### `findAll().at()` removed
221235

222236
`findAll()` now returns an array of DOMWrappers.

0 commit comments

Comments
 (0)