Skip to content
This repository was archived by the owner on Aug 8, 2022. It is now read-only.

review: src/guide/update-template-refs.md #146

Merged
merged 3 commits into from
Sep 26, 2020
Merged
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
14 changes: 7 additions & 7 deletions src/guide/composition-api-template-refs.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
## 模板引用

> 本节使用[单文件组件](single-file-component.html)代码示例的语法
> 本节代码示例使用[单文件组件](single-file-component.html)的语法

> 本指南假定你已经阅读了 [Composition API 简介](composition-api-introduction.html)和[响应式基础](reactivity-fundamentals.html)。如果你不熟悉组合 API,请先阅读这篇文章
> 本指南假定你已经阅读了 [Composition API 简介](composition-api-introduction.html)和[响应式基础](reactivity-fundamentals.html)。如果你不熟悉组合 API,请先阅读此文章

在使用组合 API 时,[响应式引用](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs)和[模板引用](component-template-refs.html)的概念是统一的。为了获得对模板内元素或组件实例的引用,我们可以像往常一样声明 ref 并从 [setup ()](composition-api-setup.html) 返回:

```html
<template>
<template>
<div ref="root">This is a root element</div>
</template>

Expand All @@ -31,11 +31,11 @@
</script>
```

这里我们在渲染上下文中暴露 `root`,并通过 `ref="root"`,将其绑定到 div 作为其 ref。在虚拟 DOM 修补算法中,如果 VNode 的 `ref` 键对应于渲染上下文中的 ref,则 VNode 的相应元素或组件实例将被分配给该 ref 的值。这是在虚拟 DOM 挂载/打补丁过程中执行的,因此模板引用只会在初始渲染之后获得赋值。
这里我们在渲染上下文中暴露 `root`,并通过 `ref="root"`,将其绑定到 div 作为其 ref。在虚拟 DOM 补丁算法中,如果 VNode 的 `ref` 键对应于渲染上下文中的 ref,则 VNode 的相应元素或组件实例将被分配给该 ref 的值。这是在虚拟 DOM 挂载/打补丁过程中执行的,因此模板引用只会在初始渲染之后获得赋值。

作为模板使用的 ref 的行为与任何其他 ref 一样:它们是响应式的,可以传递到 (或从) 复合函数中返回
作为模板使用的 ref 的行为与任何其他 ref 一样:它们是响应式的,可以传递到 (或从中返回) 复合函数中

### JSX的用法
### JSX 中的用法

```js
export default {
Expand All @@ -53,7 +53,7 @@ export default {
}
```

### 内部使用 `v-for`
### `v-for` 中的用法

Composition API 模板引用在 `v-for` 内部使用时没有特殊处理。相反,请使用函数引用执行自定义处理:

Expand Down