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

Update teleport.md #2455

Merged
merged 1 commit into from
Dec 15, 2024
Merged
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
8 changes: 4 additions & 4 deletions src/guide/built-ins/teleport.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@

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

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

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

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

Expand Down Expand Up @@ -169,11 +169,11 @@ const open = ref(false)
</Teleport>
```

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

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

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

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

Expand Down
Loading