Skip to content
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

3.5: deferred teleport の翻訳対応 #2279

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
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