Skip to content

docs(zh): update #1032

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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 9, 2018
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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions docs/zh/guides/common-tips.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,56 @@ expect(wrapper.emitted().foo[1]).toEqual([123])

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

### 从子组件触发事件

你可以通过访问子组件实例来触发一个自定义事件

**待测试的组件**

```html
<template>
<div>
<child-component @custom="onCustom"/>
<p v-if="emitted">触发!</p>
</div>
</template>

<script>
import ChildComponent from './ChildComponent'

export default {
name: 'ParentComponent',
components: { ChildComponent },
data() {
return {
emitted: false
}
},
methods: {
onCustom () {
this.emitted = true
}
}
}
</script>
```

**测试代码**

```js
import { shallowMount } from '@vue/test-utils'
import ParentComponent from '@/components/ParentComponent'
import ChildComponent from '@/components/ChildComponent'

describe('ParentComponent', () => {
it("displays 'Emitted!' when custom event is emitted", () => {
const wrapper = shallowMount(ParentComponent)
wrapper.find(ChildComponent).vm.$emit('custom')
expect(wrapper.html()).toContain('Emitted!')
})
})
```

### 操作组件状态

你可以在包裹器上用 `setData` 或 `setProps` 方法直接操作组件状态:
Expand Down
2 changes: 1 addition & 1 deletion docs/zh/guides/using-with-vuex.md
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ describe('Actions.vue', () => {

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

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

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

Expand Down