diff --git a/src/guide/component-slots.md b/src/guide/component-slots.md index 5216a71b..9db9aac0 100644 --- a/src/guide/component-slots.md +++ b/src/guide/component-slots.md @@ -1,12 +1,12 @@ -# Slots +# スロット -> This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components. +> このページはすでに [コンポーネントの基本](component-basics.md) を読んでいる事を前提としています。コンポーネントをよく知らない方はそちらを先にお読みください。 -## Slot Content +## スロットコンテンツ -Vue implements a content distribution API inspired by the [Web Components spec draft](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md), using the `` element to serve as distribution outlets for content. +Vue には [Web Components spec draft](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) にヒントを得たコンテンツ配信 API が実装されており、 `` 要素をコンテンツ配信の受け渡し口として利用します。 -This allows you to compose components like this: +これを使うことで次のようなコンポーネントを作成することが出来ます: ```html @@ -14,48 +14,48 @@ This allows you to compose components like this: ``` -Then in the template for ``, you might have: +そして、 `` のテンプレートはこうなります: ```html - + ``` -When the component renders, `` will be replaced by "Add Todo". +コンポーネントを描画する時、 `` は「Add Todo」に置換されるでしょう: ```html - + ``` -Strings are just the beginning though! Slots can also contain any template code, including HTML: +文字列はあくまで序の口です！スロットには、 HTML を含む任意のテンプレートコードを含めることも出来ます: ```html - + Add todo ``` -Or even other components: +あるいは他のコンポーネントを入れることも出来ます: ```html - + Your Profile ``` -If ``'s template did **not** contain a `` element, any content provided between its opening and closing tag would be discarded. +もしも `` のテンプレートが `` 要素を含ま **ない** 場合、開始タグと終了タグの間にある任意のコンテンツは破棄されます。 ```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 @@ -140,7 +141,7 @@ But if we provide content: ``` -Then the provided content will be rendered instead: +指定されたコンテンツが代わりに描画されます: ```html ``` -## Named Slots +## 名前付きスロット -There are times when it's useful to have multiple slots. For example, in a `` component with the following template: +複数のスロットがあると便利なときもあります。例えば、 `` コンポーネントが下記のようなテンプレートだとしましょう: ```html
- +
- +
- +
``` -For these cases, the `` element has a special attribute, `name`, which can be used to assign a unique ID to different slots so you can determine where content should be rendered: +こういった場合のために、 `` 要素は `name` という特別な属性を持っていて、それぞれのスロットにユニークな ID を割り当てることによってコンテンツがどこに描画されるべきかを決定することができます: ```html
@@ -182,9 +183,9 @@ For these cases, the `` element has a special attribute, `name`, which can
``` -A `` outlet without `name` implicitly has the name "default". +`name` のない `` 要素は、暗黙的に「default」という名前を持ちます。 -To provide content to named slots, we need to use the `v-slot` directive on a `