File tree Expand file tree Collapse file tree 2 files changed +28
-0
lines changed Expand file tree Collapse file tree 2 files changed +28
-0
lines changed Original file line number Diff line number Diff 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}
Original file line number Diff line number Diff 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** 関連**
You can’t perform that action at this time.
0 commit comments