Skip to content

Commit e20d854

Browse files
VictorCazanaveeddyerburgh
authored andcommitted
docs: add emitting event from child component section (#1018)
1 parent cf7bd66 commit e20d854

File tree

1 file changed

+48
-0
lines changed

1 file changed

+48
-0
lines changed

Diff for: docs/guides/common-tips.md

+48
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,54 @@ expect(wrapper.emitted().foo[1]).toEqual([123])
5858

5959
You can also get an Array of the events in their emit order by calling [`wrapper.emittedByOrder()`](../api/wrapper/emittedByOrder.md).
6060

61+
### Emitting Event from Child Component
62+
63+
You can emit a custom event from a child component by accessing the instance.
64+
65+
**Component under test**
66+
```html
67+
<template>
68+
<div>
69+
<child-component @custom="onCustom"/>
70+
<p v-if="emitted">Emitted!</p>
71+
</div>
72+
</template>
73+
74+
<script>
75+
import ChildComponent from './ChildComponent'
76+
77+
export default {
78+
name: 'ParentComponent',
79+
components: { ChildComponent },
80+
data() {
81+
return {
82+
emitted: false
83+
}
84+
},
85+
methods: {
86+
onCustom () {
87+
this.emitted = true
88+
}
89+
}
90+
}
91+
</script>
92+
```
93+
94+
**Test**
95+
```js
96+
import { shallowMount } from '@vue/test-utils'
97+
import ParentComponent from '@/components/ParentComponent'
98+
import ChildComponent from '@/components/ChildComponent'
99+
100+
describe('ParentComponent', () => {
101+
it("displays 'Emitted!' when custom event is emitted", () => {
102+
const wrapper = shallowMount(ParentComponent)
103+
wrapper.find(ChildComponent).vm.$emit('custom')
104+
expect(wrapper.html()).toContain('Emitted!')
105+
})
106+
})
107+
```
108+
61109
### Manipulating Component State
62110

63111
You can directly manipulate the state of the component using the `setData` or `setProps` method on the wrapper:

0 commit comments

Comments
 (0)