From f6860487aabbe8237d2469ccacd75c88b77ae983 Mon Sep 17 00:00:00 2001 From: ushironoko Date: Tue, 22 Sep 2020 19:37:01 +0900 Subject: [PATCH 1/2] docs: translate Template refs --- src/guide/component-template-refs.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/guide/component-template-refs.md b/src/guide/component-template-refs.md index e87de3f6..a42bb257 100644 --- a/src/guide/component-template-refs.md +++ b/src/guide/component-template-refs.md @@ -1,14 +1,14 @@ -# Template refs +# Template refs について -> 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)を読んでいることを前提としています。コンポーネントを初めて使用する場合は、最初にそちらをお読みください。 -Despite the existence of props and events, sometimes you might still need to directly access a child component in JavaScript. To achieve this you can assign a reference ID to the child component or HTML element using the `ref` attribute. For example: +プロップやイベントが存在するにもかかわらず、 JavaScript で子コンポーネントに直接アクセスしなければならない場合があります。それを達成するために、`ref` 属性を使うことで子コンポーネントや HTML 要素に参照IDを割り当てられます。例えば、以下のようになります: ```html ``` -This may be useful when you want to, for example, programmatically focus this input on component mount: +これは、例えば、コンポーネントのマウント時にプログラムで input をフォーカスさせたい時に便利です: ```js const app = Vue.createApp({}) @@ -28,7 +28,7 @@ app.component('base-input', { }) ``` -Also, you can add another `ref` to the component itself and use it to trigger `focusInput` event from the parent component: +また、別の `ref` をコンポーネント自体に追加し、それを使用して親コンポーネントからの `focusInput` イベントをトリガーできます: ```html @@ -39,7 +39,7 @@ this.$refs.usernameInput.focusInput() ``` ::: warning -`$refs` are only populated after the component has been rendered. It is only meant as an escape hatch for direct child manipulation - you should avoid accessing `$refs` from within templates or computed properties. +`$refs` は、コンポーネントがレンダリングされた後にのみ生成されます。これは、子要素を直接操作するための脱出ハッチとしてのみ意図されています。テンプレートや `computed` プロパティから `$refs` にアクセスするべきではありません。 ::: -**See also**: [Using template refs in Composition API](/guide/composition-api-template-refs.html#template-refs) +**こちらも参照してください**: [コンポジションAPIでTemplate refsを使用する](/guide/composition-api-template-refs.html#template-refs) From 054dab2200972a770f9642b205f83111acf9bec3 Mon Sep 17 00:00:00 2001 From: ushironoko Date: Wed, 23 Sep 2020 20:34:09 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC?= =?UTF-8?q?=E5=86=85=E5=AE=B9=E3=81=AE=E5=8F=8D=E6=98=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/guide/component-template-refs.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/guide/component-template-refs.md b/src/guide/component-template-refs.md index a42bb257..7b2ec40f 100644 --- a/src/guide/component-template-refs.md +++ b/src/guide/component-template-refs.md @@ -1,8 +1,8 @@ -# Template refs について +# テンプレート参照について > このページは、すでに[コンポーネントの基本](component-basics.md)を読んでいることを前提としています。コンポーネントを初めて使用する場合は、最初にそちらをお読みください。 -プロップやイベントが存在するにもかかわらず、 JavaScript で子コンポーネントに直接アクセスしなければならない場合があります。それを達成するために、`ref` 属性を使うことで子コンポーネントや HTML 要素に参照IDを割り当てられます。例えば、以下のようになります: +プロパティやイベントが存在するにもかかわらず、 JavaScript で子コンポーネントに直接アクセスしなければならない場合があります。それを達成するために、`ref` 属性を使うことで子コンポーネントや HTML 要素に参照 ID を割り当てられます。例えば、以下のようになります: ```html @@ -42,4 +42,4 @@ this.$refs.usernameInput.focusInput() `$refs` は、コンポーネントがレンダリングされた後にのみ生成されます。これは、子要素を直接操作するための脱出ハッチとしてのみ意図されています。テンプレートや `computed` プロパティから `$refs` にアクセスするべきではありません。 ::: -**こちらも参照してください**: [コンポジションAPIでTemplate refsを使用する](/guide/composition-api-template-refs.html#template-refs) +**こちらも参照してください**: [コンポジション API でテンプレート参照を使用する](/guide/composition-api-template-refs.html#template-refs)