Skip to content

Commit

Permalink
docs(zh-cn): guide/advanced/slots.md (#2565)
Browse files Browse the repository at this point in the history
* slots.md

* Apply suggestions from code review

* Update docs/zh/guide/advanced/slots.md

---------

Co-authored-by: Jinjiang <zhaojinjiang@me.com>
  • Loading branch information
qq466610987 and Jinjiang authored Jan 4, 2025
1 parent 627f719 commit fd31749
Showing 1 changed file with 9 additions and 9 deletions.
18 changes: 9 additions & 9 deletions docs/zh/guide/advanced/slots.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@ test('layout default slot', () => {
})
```

## 命名插槽
## 具名插槽

你可能有一个更复杂的 `<layout>` 组件,带有一些命名插槽。例如:
你可能有一个更复杂的 `<layout>` 组件,带有一些具名插槽。例如:

```js
const Layout = {
Expand All @@ -73,7 +73,7 @@ const Layout = {
}
```

VTU 也支持这一点。你可以编写如下测试。在这个示例中,我们将 HTML 而不是文本内容传递给插槽
VTU 同样支持这种用法。你可以编写如下测试。在这个示例中,我们将 HTML 而不是文本内容传递给插槽

```js
test('layout full page layout', () => {
Expand Down Expand Up @@ -132,11 +132,11 @@ test('layout full page layout', () => {
})
```

[参考测试](https://github.com/vuejs/test-utils/blob/9d3c2a6526f3d8751d29b2f9112ad2a3332bbf52/tests/mountingOptions/slots.spec.ts#L124-L167)获取更多示例和用例
[参考这些测试](https://github.com/vuejs/test-utils/blob/9d3c2a6526f3d8751d29b2f9112ad2a3332bbf52/tests/mountingOptions/slots.spec.ts#L124-L167)以获取更多示例和用例

## 作用域插槽

[作用域插槽](https://v3.vuejs.org/guide/component-slots.html#scoped-slots)和绑定也得到了支持
我们也支持[作用域插槽](https://cn.vuejs.org/guide/components/slots.html#scoped-slots)及其绑定

```js
const ComponentWithSlots = {
Expand Down Expand Up @@ -172,7 +172,7 @@ test('scoped slots', () => {
test('scoped slots', () => {
const wrapper = mount(ComponentWithSlots, {
slots: {
scoped: `Hello {{ params.msg }}` // no wrapping template tag provided, slot scope exposed as "params"
scoped: `Hello {{ params.msg }}` // 没有包装 template 标签时,插槽作用域暴露为“params
}
})

Expand All @@ -182,7 +182,7 @@ test('scoped slots', () => {

## 结论

- 使用 `slots` 挂载选项来测试组件使用 `<slot>` 是否正确渲染内容
- 使用 `slots` 挂载选项来测试使用 `<slot>` 的组件是否正确渲染内容
- 内容可以是字符串、渲染函数或导入的单文件组件 (SFC)。
- 使用 `default` 表示默认插槽,使用正确的名称表示命名插槽
- 作用域插槽和 `#` 简写也得到了支持
- 对于默认插槽使用 `default`,对于具名插槽使用对应的名称
- 支持作用域插槽和 `#` 简写

0 comments on commit fd31749

Please sign in to comment.