From 299852e9949c980da75f4ffabe7aca2bb54a957d Mon Sep 17 00:00:00 2001 From: Takuma Hanatani Date: Sun, 26 Feb 2017 21:24:19 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=E5=8E=9F=E6=96=87=E3=82=92=E5=8F=96?= =?UTF-8?q?=E3=82=8A=E8=BE=BC=E3=82=93=E3=81=A7=E3=82=BD=E3=83=BC=E3=82=B9?= =?UTF-8?q?=E3=82=B3=E3=83=BC=E3=83=89=E3=81=AE=E3=81=BF=E5=85=88=E3=81=AB?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/components.md | 62 ++++++++++++++++++++++++++++++-------- 1 file changed, 49 insertions(+), 13 deletions(-) diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md index 6fa374662..aa6cfa72d 100644 --- a/src/v2/guide/components.md +++ b/src/v2/guide/components.md @@ -543,13 +543,18 @@ new Vue({ は、以下の糖衣構文です: ``` html - + ``` コンポーネントと共に使用されるとき、これは簡単にできます: ``` html - + + ``` そのため、コンポーネントを `v-model` と共に動かすためには、以下が必要です: @@ -565,16 +570,15 @@ new Vue({ ``` js Vue.component('currency-input', { - template: '\ - \ - $\ - \ - \ - ', + template: ` + + $ + + + `, props: ['value'], methods: { // 値を直接的に更新する代わりに、このメソッドを使用して input の @@ -637,7 +641,39 @@ new Vue({ -イベントインターフェイスは、より特殊な入力フィールドを作成するために使用することもできます。例えば、次のような可能性を想像してみてください: +### Customizing Component `v-model` + +> New in 2.2.0 + +By default, `v-model` on a component uses `value` as the prop and `input` as the event, but some input types such as checkboxes and radio buttons may want to use the `value` prop for a different purpose. Using the `model` option can avoid the conflict in such cases: + +``` js +Vue.component('my-checkbox', { + model: { + prop: 'checked', + event: 'change' + }, + props: { + // this allows using the `value` prop for a different purpose + value: String + }, + // ... +}) +``` + +``` html + +``` + +The above will be equivalent to: + +``` html + + +``` ``` html From 4be5462fc953bc55e5cc84a3a15f1611da946d86 Mon Sep 17 00:00:00 2001 From: Takuma Hanatani Date: Sun, 26 Feb 2017 21:52:18 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=E7=BF=BB=E8=A8=B3=E5=88=9D=E7=A8=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/components.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md index aa6cfa72d..72141d55b 100644 --- a/src/v2/guide/components.md +++ b/src/v2/guide/components.md @@ -641,11 +641,11 @@ new Vue({ -### Customizing Component `v-model` +### コンポーネントの `v-model` のカスタマイズ -> New in 2.2.0 +> 2.2.0 の新機能 -By default, `v-model` on a component uses `value` as the prop and `input` as the event, but some input types such as checkboxes and radio buttons may want to use the `value` prop for a different purpose. Using the `model` option can avoid the conflict in such cases: +デフォルトでは、コンポーネントにおける `v-model` は、 `value` を prop として、 `input` をイベントして用います。しかし、チェックボックスやラジオボタンなどの入力タイプを利用する場合は、 `value` prop をその他の目的で利用することができます。その際、 `model` オプションを利用することで、値の競合を避けることが可能です: ``` js Vue.component('my-checkbox', { @@ -654,7 +654,7 @@ Vue.component('my-checkbox', { event: 'change' }, props: { - // this allows using the `value` prop for a different purpose + // これによって、 `value` prop を別の目的で利用することを許可します。 value: String }, // ...