Skip to content

Commit

Permalink
3.5: deferred teleport の翻訳対応 (#2279)
Browse files Browse the repository at this point in the history
* 3.5: deferred teleport

* docs: fix code comments

* docs: fix context
  • Loading branch information
TakaShinoda authored Sep 8, 2024
1 parent f88f8ff commit 754e37c
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 0 deletions.
15 changes: 15 additions & 0 deletions src/api/built-in-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -286,6 +286,12 @@ h(Transition, {
* 動的に変更できます。
*/
disabled?: boolean
/**
* `true` の場合、Teleport は
* ターゲットを解決する前にアプリケーションの他の部分が
* マウントされるまで遅延します。(3.5+)
*/
defer?: boolean
}
```

Expand All @@ -307,6 +313,15 @@ h(Transition, {
</Teleport>
```

ターゲットの解決を遅延する <sup class="vt-badge" data-text="3.5+" />:

```vue-html
<Teleport defer to="#late-div">...</Teleport>
<!-- テンプレートの後の方 -->
<div id="late-div"></div>
```

- **参照** [ガイド - Teleport](/guide/built-ins/teleport)

## `<Suspense>` <sup class="vt-badge experimental" /> {#suspense}
Expand Down
13 changes: 13 additions & 0 deletions src/guide/built-ins/teleport.md
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,19 @@ const open = ref(false)
</div>
```

## 遅延 Teleport <sup class="vt-badge" data-text="3.5+" /> {#deferred-teleport}

Vue 3.5 以降では、`defer` prop を使用するとアプリケーションの他の部分がマウントされるまで、Teleport のターゲット解決を遅延できます。これにより、Vue によってレンダリングされるコンポーネントツリーの後の方にあるコンテナ要素をターゲットにすることができます:

```vue-html
<Teleport defer to="#late-div">...</Teleport>
<!-- テンプレートの後の方 -->
<div id="late-div"></div>
```

ターゲット要素はテレポートと同じマウント / 更新ティックでレンダリングされる必要があることに注意してください。つまり、`<div>` が 1 秒後にマウントされた場合、Teleport はエラーを報告します。defer は `mounted` ライフサイクルフックと同様に動作します。

---

**関連**
Expand Down

0 comments on commit 754e37c

Please sign in to comment.