diff --git a/src/guide/built-ins/teleport.md b/src/guide/built-ins/teleport.md index 6ed791650..7dbd98177 100644 --- a/src/guide/built-ins/teleport.md +++ b/src/guide/built-ins/teleport.md @@ -6,9 +6,9 @@ ## 基本的な使い方 {#basic-usage} -ときどき、次のようなシナリオに遭遇することがあります: 論理的にはコンポーネントのテンプレートの一部は、コンポーネントに属していますが、視覚的な観点からすると、Vue アプリケーション外の DOM のどこかに表示されるべきものです。 +コンポーネントのテンプレートの一部分が、論理的にはコンポーネントに属しているものの、視覚的な観点からすると DOM の別の場所、場合によっては Vue アプリケーションの外に表示されるべきものもあります。 -もっとも一般的な例は、フルスクリーンのモーダルを構築するときです。理想的には、モーダルのボタンとモーダル自体を同じコンポーネントに収めたいものです。なぜなら、これらは両方ともモーダルの開閉状態に関連しているからです。しかし、これではモーダルがボタンと一緒にレンダリングされ、アプリケーションの DOM 階層に深くネストされることになります。これにより CSS でモーダルを配置する際に、いくつかの厄介な問題を引き起こす可能性があります。 +もっとも一般的な例は、フルスクリーンのモーダルを構築するときです。理想的には、モーダルのボタンとモーダル自体のコードは同じ単一ファイルコンポーネント内に記述したいです。なぜなら、これらは両方ともモーダルの開閉状態に関連しているからです。しかし、これではモーダルがボタンと一緒にレンダリングされ、アプリケーションの DOM 階層に深くネストされることになります。これにより CSS でモーダルを配置する際に、いくつかの厄介な問題を引き起こす可能性があります。 次のような HTML 構造を考えてみましょう。 @@ -169,11 +169,11 @@ const open = ref(false) </Teleport> ``` -メディアクエリーの変更を検知して `isMobile` の状態によって動的に更新できます。 +その後、`isMobile` を動的に更新できます。 ## 同じターゲットに複数の Teleport {#multiple-teleports-on-the-same-target} -慣用的な例として、再利用可能な `<Modal>` コンポーネントにおいて複数のインスタンスが同時にアクティブになる可能性があります。このようなシナリオの場合、複数の `<Teleport>` コンポーネントが同じターゲット要素にコンテンツをマウントできます。順番は単純な追加で、ターゲット要素内で先にマウントされたものの後に配置されます。 +慣用的な例として、再利用可能な `<Modal>` コンポーネントにおいて複数のインスタンスが同時にアクティブになる可能性があります。このようなシナリオの場合、複数の `<Teleport>` コンポーネントが同じターゲット要素にコンテンツをマウントできます。順序は単純な追加となり、後のマウントは前のマウントの後に配置されますが、すべてターゲット要素内に配置されます。 次のような使い方があるとします: