Skip to content

Commit 3c680a4

Browse files
authored
Update teleport.md (#2455)
1 parent 1911553 commit 3c680a4

File tree

1 file changed

+4
-4
lines changed

1 file changed

+4
-4
lines changed

src/guide/built-ins/teleport.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66

77
## 基本的な使い方 {#basic-usage}
88

9-
ときどき、次のようなシナリオに遭遇することがあります: 論理的にはコンポーネントのテンプレートの一部は、コンポーネントに属していますが、視覚的な観点からすると、Vue アプリケーション外の DOM のどこかに表示されるべきものです
9+
コンポーネントのテンプレートの一部分が、論理的にはコンポーネントに属しているものの、視覚的な観点からすると DOM の別の場所、場合によっては Vue アプリケーションの外に表示されるべきものもあります
1010

11-
もっとも一般的な例は、フルスクリーンのモーダルを構築するときです。理想的には、モーダルのボタンとモーダル自体を同じコンポーネントに収めたいものです。なぜなら、これらは両方ともモーダルの開閉状態に関連しているからです。しかし、これではモーダルがボタンと一緒にレンダリングされ、アプリケーションの DOM 階層に深くネストされることになります。これにより CSS でモーダルを配置する際に、いくつかの厄介な問題を引き起こす可能性があります。
11+
もっとも一般的な例は、フルスクリーンのモーダルを構築するときです。理想的には、モーダルのボタンとモーダル自体のコードは同じ単一ファイルコンポーネント内に記述したいです。なぜなら、これらは両方ともモーダルの開閉状態に関連しているからです。しかし、これではモーダルがボタンと一緒にレンダリングされ、アプリケーションの DOM 階層に深くネストされることになります。これにより CSS でモーダルを配置する際に、いくつかの厄介な問題を引き起こす可能性があります。
1212

1313
次のような HTML 構造を考えてみましょう。
1414

@@ -169,11 +169,11 @@ const open = ref(false)
169169
</Teleport>
170170
```
171171

172-
メディアクエリーの変更を検知して `isMobile` の状態によって動的に更新できます
172+
その後、`isMobile` を動的に更新できます
173173

174174
## 同じターゲットに複数の Teleport {#multiple-teleports-on-the-same-target}
175175

176-
慣用的な例として、再利用可能な `<Modal>` コンポーネントにおいて複数のインスタンスが同時にアクティブになる可能性があります。このようなシナリオの場合、複数の `<Teleport>` コンポーネントが同じターゲット要素にコンテンツをマウントできます。順番は単純な追加で、ターゲット要素内で先にマウントされたものの後に配置されます
176+
慣用的な例として、再利用可能な `<Modal>` コンポーネントにおいて複数のインスタンスが同時にアクティブになる可能性があります。このようなシナリオの場合、複数の `<Teleport>` コンポーネントが同じターゲット要素にコンテンツをマウントできます。順序は単純な追加となり、後のマウントは前のマウントの後に配置されますが、すべてターゲット要素内に配置されます
177177

178178
次のような使い方があるとします:
179179

0 commit comments

Comments
 (0)