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, {
286
286
* 動的に変更できます。
287
287
*/
288
288
disabled? : boolean
289
+ /**
290
+ * `true` の場合、Teleport は
291
+ * ターゲットを解決する前にアプリケーションの他の部分が
292
+ * マウントされるまで遅延します。(3.5+)
293
+ */
294
+ defer? : boolean
289
295
}
290
296
```
291
297
@@ -307,6 +313,15 @@ h(Transition, {
307
313
</Teleport>
308
314
```
309
315
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
+
310
325
- ** 参照** [ ガイド - Teleport] ( /guide/built-ins/teleport )
311
326
312
327
## ` <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)
195
195
</div >
196
196
```
197
197
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
+
198
211
---
199
212
200
213
** 関連**
You can’t perform that action at this time.
0 commit comments