Skip to content

Commit 9cbf908

Browse files
Jinjiangeddyerburgh
authored andcommitted
docs(zh): update (#1032)
1 parent 5500553 commit 9cbf908

File tree

2 files changed

+51
-1
lines changed

2 files changed

+51
-1
lines changed

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

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

5959
你也可以调用 [`wrapper.emittedByOrder()`](../api/wrapper/emittedByOrder.md) 获取一个按触发先后排序的事件数组。
6060

61+
### 从子组件触发事件
62+
63+
你可以通过访问子组件实例来触发一个自定义事件
64+
65+
**待测试的组件**
66+
67+
```html
68+
<template>
69+
<div>
70+
<child-component @custom="onCustom"/>
71+
<p v-if="emitted">触发!</p>
72+
</div>
73+
</template>
74+
75+
<script>
76+
import ChildComponent from './ChildComponent'
77+
78+
export default {
79+
name: 'ParentComponent',
80+
components: { ChildComponent },
81+
data() {
82+
return {
83+
emitted: false
84+
}
85+
},
86+
methods: {
87+
onCustom () {
88+
this.emitted = true
89+
}
90+
}
91+
}
92+
</script>
93+
```
94+
95+
**测试代码**
96+
97+
```js
98+
import { shallowMount } from '@vue/test-utils'
99+
import ParentComponent from '@/components/ParentComponent'
100+
import ChildComponent from '@/components/ChildComponent'
101+
102+
describe('ParentComponent', () => {
103+
it("displays 'Emitted!' when custom event is emitted", () => {
104+
const wrapper = shallowMount(ParentComponent)
105+
wrapper.find(ChildComponent).vm.$emit('custom')
106+
expect(wrapper.html()).toContain('Emitted!')
107+
})
108+
})
109+
```
110+
61111
### 操作组件状态
62112

63113
你可以在包裹器上用 `setData``setProps` 方法直接操作组件状态:

Diff for: docs/zh/guides/using-with-vuex.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ describe('Actions.vue', () => {
9595

9696
这里发生了什么?首先我们用 `localVue.use` 方法告诉 Vue 使用 Vuex。这只是 `Vue.use` 的一个包裹器。
9797

98-
然后我们用 `new Vuex.store` 伪造了一个 store 并填入假数据。我们只把它传递给 action,因为我们只关心这个。
98+
然后我们用 `new Vuex.Store` 伪造了一个 store 并填入假数据。我们只把它传递给 action,因为我们只关心这个。
9999

100100
该 action 是 [Jest 伪造函数](https://facebook.github.io/jest/docs/en/mock-functions.html)。这些伪造函数让我们去断言该 action 是否被调用。
101101

0 commit comments

Comments
 (0)