Skip to content

Guide > Reusability & Composition > Teleport の翻訳を追従 #292

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.

Sign up for GitHub

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

Merged
merged 5 commits into from
Apr 28, 2021
Merged

Guide > Reusability & Composition > Teleport の翻訳を追従 #292

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
db96a43
docs: added video explanation links for Vue 3
naokie Apr 28, 2021
a6391e7
docs: add Vue 3 video lessons
naokie Apr 28, 2021
bac6fd5
Improve formatting of teleport.md
naokie Apr 28, 2021
14ed066
fix: markdown format
naokie Apr 28, 2021
6f15591
docs: replace to camelcase for technical term
naokie Apr 28, 2021
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
6 changes: 4 additions & 2 deletions src/guide/teleport.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Teleport

<VideoLesson href="https://vueschool.io/lessons/vue-3-teleport?friend=vuejs" title="Vue School で Teleport の使い方を学ぶ">Vue School の無料レッスンで Teleport の使い方を学ぶ</VideoLesson>

Vue は私たちに、UI やそれに関連する挙動をコンポーネントにして、カプセル化することで UI を作り上げることを勧めています。私たちはそれらを互いに入れ子にして、アプリケーションを構成するツリーを作ることができます。

しかしながら、コンポーネントのテンプレートの一部が、論理的にこのコンポーネントに属している場合もありますが、技術的な観点では、テンプレートのこの部分を Vue アプリの外や、DOM 内の別の場所に移動させることが望ましいこともあります。
Expand Down Expand Up @@ -53,7 +55,7 @@ app.component('modal-button', {

Teleport は、グローバルステートに頼ったり、2つのコンポーネントに分割しなくても、HTML の一部を DOM のどの親の下でレンダリングするかを制御するための、きれいな方法を提供します。

`<teleport>` を使って、Vue にこの HTML を "**body**" タグに "**teleport (テレポート) **" させるよう、`modal-button` を変更しましょう。
`<teleport>` を使って、Vue にこの HTML を "**body**" タグに "**Teleport** (テレポート) " させるよう、`modal-button` を変更しましょう。

```js
app.component('modal-button', {
Expand Down Expand Up @@ -119,7 +121,7 @@ app.component('child-component', {

これは、親コンポーネントからの注入が期待通りに動作し、Vue Devtools 上では実際のコンテンツが移動した場所に配置されるのではなく、親コンポーネントの下に配置されることを意味します。

## 複数の teleport のターゲットを同じにして使う
## 複数の Teleport のターゲットを同じにして使う
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

他と同じように、技術用語としてそのまま英語を扱うケースではキャメルケースにしました。


一般的なユースケースのシナリオは、再利用可能な `<Modal>` コンポーネントで、同時に複数のインスタンスがアクティブになっている状態かもしれません。このようなシナリオの場合、複数の `<teleport>` は、同じターゲット要素に対してそれぞれのコンテンツをマウントすることができます。

Expand Down