Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs]: improve slot scope auto exposing "params" behaviour #1924

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 16 additions & 3 deletions docs/guide/advanced/slots.md
Expand Up @@ -139,7 +139,7 @@ test('layout full page layout', () => {

## Scoped Slots

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

```js
const ComponentWithSlots = {
Expand All @@ -158,8 +158,8 @@ const ComponentWithSlots = {
test('scoped slots', () => {
const wrapper = mount(ComponentWithSlots, {
slots: {
scoped: `<template #scoped="params">
Hello {{ params.msg }}
scoped: `<template #scoped="scope">
Hello {{ scope.msg }}
</template>
`
}
Expand All @@ -169,6 +169,19 @@ test('scoped slots', () => {
})
```

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.

```js
test('scoped slots', () => {
const wrapper = mount(ComponentWithSlots, {
slots: {
scoped: `Hello {{ params.msg }}` // no wrapping template tag provided, slot scope exposed as "params"
}
})

expect(wrapper.html()).toContain('Hello world')
})

## Conclusion

- Use the `slots` mounting option to test components using `<slot>` are rendering content correctly.
Expand Down
14 changes: 14 additions & 0 deletions docs/migration/index.md
Expand Up @@ -217,6 +217,20 @@ Vue 3 renamed the `vm.$destroy` to `vm.$unmount`. Vue Test Utils has followed su

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.

### `slots`鈥榮 scope is now exposed as `params`

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.

```diff
shallowMount(Component, {
- scopedSlots: {
+ slots: {
- default: '<p>{{props.index}},{{props.text}}</p>'
+ default: '<p>{{params.index}},{{params.text}}</p>'
}
})
````

### `findAll().at()` removed

`findAll()` now returns an array of DOMWrappers.
Expand Down