You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/teleport.md
+17-17Lines changed: 17 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
1
# Teleport
2
2
3
-
Vue encourages us to build our UIs by encapsulating UI and related behavior into components. We can nest them inside one another to build a tree that makes up an application UI.
However, sometimes a part of a component's template belongs to this component logically, while from a technical point of view, it would be preferable to move this part of the template somewhere else in the DOM, outside of the Vue app.
A common scenario for this is creating a component that includes a full-screen modal. In most cases, you'd want the modal's logic to live within the component, but the positioning of the modal quickly becomes difficult to solve through CSS, or requires a change in component composition.
@@ -19,9 +19,9 @@ Consider the following HTML structure.
19
19
</body>
20
20
```
21
21
22
-
Let's take a look at `modal-button`.
22
+
modal-button` について見てみましょう。
23
23
24
-
The component will have a `button`element to trigger the opening of the modal, and a `div`element with a class of `.modal`, which will contain the modal's content and a button to self-close.
When using this component inside the initial HTML structure, we can see a problem - the modal is being rendered inside the deeply nested `div`and the `position: absolute`of the modal takes the parent relatively positioned `div`as reference.
52
+
このコンポーネントを最初の HTML 構造の中で使うときに、問題が見えてきます。モーダルは深く入れ子になった `div`の中にレンダリングされており、モーダルの `position: absolute`は、相対的に位置する親の `div`を参照として使用します。
53
53
54
-
Teleport provides a clean way to allow us to control under which parent in our DOM we want a piece of HTML to be rendered, without having to resort to global state or splitting this into two components.
54
+
Teleport は、グローバルステートに頼ったり、2つのコンポーネントに分割しなくても、HTML の一部を DOM のどの親の下でレンダリングするかを制御するための、きれいな方法を提供します。
55
55
56
-
Let's modify our `modal-button` to use `<teleport>`and tell Vue "**teleport** this HTML **to** the "**body**" tag".
56
+
`<teleport>`を使って、Vue にこの HTML を "**body**" タグに "**teleport**" させるよう、`modal-button` を変更しましょう。
57
57
58
58
```js
59
59
app.component('modal-button', {
@@ -82,7 +82,7 @@ app.component('modal-button', {
82
82
})
83
83
```
84
84
85
-
As a result, once we click the button to open the modal, Vue will correctly render the modal's content as a child of the `body`tag.
In this case, even when `child-component`is rendered in the different place, it will remain a child of `parent-component`and will receive a `name` prop from it.
This also means that injections from a parent component work as expected, and that the child component will be nested below the parent component in the Vue Devtools, instead of being placed where the actual content moved to.
A common use case scenario would be a reusable `<Modal>`component of which there might be multiple instances active at the same time. For this kind of scenario, multiple `<teleport>`components can mount their content to the same target element. The order will be a simple append - later mounts will be located after earlier ones within the target element.
0 commit comments