diff --git a/src/v2/guide/components-slots.md b/src/v2/guide/components-slots.md index 66286ec3e..65ef455e9 100644 --- a/src/v2/guide/components-slots.md +++ b/src/v2/guide/components-slots.md @@ -1,14 +1,15 @@ --- title: スロット type: guide -updated: 2019-02-11 +updated: 2019-02-16 order: 104 --- > このページは [コンポーネントの基本](components.html) を読まれていることが前提になっています。コンポーネントを扱った事のない場合はこちらのページを先に読んでください。 -> In 2.6.0, we introduced a new unified syntax (the `v-slot` directive) for named and scoped slots. It replaces the `slot` and `slot-scope` attributes, which are now deprecated, but have _not_ been removed and are still documented [here](#Deprecated-Syntax). The rationale for introducing the new syntax is described in this [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md). +> バージョン 2.6.0 で、名前付きスロットとスコープ付きスロットに対する新しい統一構文 (`v-slot` ディレクティブ) が導入されました。`slot` および `slot-scope` 属性は非推奨となり置き換えられますが、まだ削除は _されず_ 、ドキュメントも [ここ](#非推奨の構文) にあります。新しい構文を導入する理由は、この [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md) に記述されています。 + ## スロットコンテンツ @@ -53,11 +54,11 @@ Vue には [Web Components spec draft](https://github.com/w3c/webcomponents/blob ``` -If ``'s template did **not** contain a `` element, any content provided between its opening and closing tag would be discarded. +もしも `` のテンプレートが `` 要素を含ま **ない** 場合、開始タグと終了タグの間にある任意のコンテンツは破棄されます。 -## Compilation Scope +## コンパイルスコープ -When you want to use data inside a slot, such as in: +スロットの中でデータを扱いたい場合はこうします: ``` html @@ -65,26 +66,26 @@ When you want to use data inside a slot, such as in: ``` -That slot has access to the same instance properties (i.e. the same "scope") as the rest of the template. The slot does **not** have access to ``'s scope. For example, trying to access `url` would not work: +このスロットは、テンプレートの残りの部分と同じインスタンスプロパティ (つまり、同じ "スコープ") にアクセスできます。`` のスコープにアクセスすることは **できません**。例えば、`url` へのアクセスは動作しないでしょう: ``` html Clicking here will send you to: {{ url }} ``` -As a rule, remember that: +ルールとしては、以下を覚えておいてください: -> Everything in the parent template is compiled in parent scope; everything in the child template is compiled in the child scope. +> 親テンプレート内の全てのものは親のスコープでコンパイルされ、子テンプレート内の全てものは子のスコープでコンパイルされる。 -## Fallback Content +## フォールバックコンテンツ -There are cases when it's useful to specify fallback (i.e. default) content for a slot, to be be rendered only when no content is provided. For example, in a `` component: +スロットに対して、コンテンツがない場合にだけ描画されるフォールバック (つまり、デフォルトの) コンテンツを指定すると便利な場合があります。例えば、`` コンポーネントにおいて: ```html ``` -We might want the text "Submit" to be rendered inside the ` ``` -Now when we use `` in a parent component, providing no content for the slot: +そして、親コンポーネントからスロットのコンテンツを指定せずに `` を使うと: ```html ``` -will render the fallback content, "Submit": +フォールバックコンテンツの「Submit」が描画されます: ```html ``` -But if we provide content: +しかし、もしコンテンツを指定すると: ```html @@ -122,7 +123,7 @@ But if we provide content: ``` -Then the provided content will be rendered instead: +指定されたコンテンツが代わりに描画されます: ```html