Skip to content

Commit 754e37c

Browse files
authored
3.5: deferred teleport の翻訳対応 (#2279)
* 3.5: deferred teleport * docs: fix code comments * docs: fix context
1 parent f88f8ff commit 754e37c

File tree

2 files changed

+28
-0
lines changed

2 files changed

+28
-0
lines changed

src/api/built-in-components.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -286,6 +286,12 @@ h(Transition, {
286286
* 動的に変更できます。
287287
*/
288288
disabled?: boolean
289+
/**
290+
* `true` の場合、Teleport は
291+
* ターゲットを解決する前にアプリケーションの他の部分が
292+
* マウントされるまで遅延します。(3.5+)
293+
*/
294+
defer?: boolean
289295
}
290296
```
291297

@@ -307,6 +313,15 @@ h(Transition, {
307313
</Teleport>
308314
```
309315

316+
ターゲットの解決を遅延する <sup class="vt-badge" data-text="3.5+" />:
317+
318+
```vue-html
319+
<Teleport defer to="#late-div">...</Teleport>
320+
321+
<!-- テンプレートの後の方 -->
322+
<div id="late-div"></div>
323+
```
324+
310325
- **参照** [ガイド - Teleport](/guide/built-ins/teleport)
311326

312327
## `<Suspense>` <sup class="vt-badge experimental" /> {#suspense}

src/guide/built-ins/teleport.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,19 @@ const open = ref(false)
195195
</div>
196196
```
197197

198+
## 遅延 Teleport <sup class="vt-badge" data-text="3.5+" /> {#deferred-teleport}
199+
200+
Vue 3.5 以降では、`defer` prop を使用するとアプリケーションの他の部分がマウントされるまで、Teleport のターゲット解決を遅延できます。これにより、Vue によってレンダリングされるコンポーネントツリーの後の方にあるコンテナ要素をターゲットにすることができます:
201+
202+
```vue-html
203+
<Teleport defer to="#late-div">...</Teleport>
204+
205+
<!-- テンプレートの後の方 -->
206+
<div id="late-div"></div>
207+
```
208+
209+
ターゲット要素はテレポートと同じマウント / 更新ティックでレンダリングされる必要があることに注意してください。つまり、`<div>` が 1 秒後にマウントされた場合、Teleport はエラーを報告します。defer は `mounted` ライフサイクルフックと同様に動作します。
210+
198211
---
199212

200213
**関連**

0 commit comments

Comments
 (0)