Skip to content

Commit c721f83

Browse files
naokienaokie
authored
Guide > Components In-Depth > Custom Evnets の翻訳を追従 (#300)
* docs: replace foo in v-model arguments vuejs/docs@fb9ed21#diff-0ddfe84e020022e6d0eef551720a870386146a8703934cd0cc00a952e651e402 * Minor edit to paragraph in Custom Events section vuejs/docs@e8cf8da#diff-0ddfe84e020022e6d0eef551720a870386146a8703934cd0cc00a952e651e402 * fix: fixed casing for event vuejs/docs@edf61f8#diff-0ddfe84e020022e6d0eef551720a870386146a8703934cd0cc00a952e651e402 * fix: fixed example for events casing vuejs/docs@ec79709#diff-0ddfe84e020022e6d0eef551720a870386146a8703934cd0cc00a952e651e402 * fix: add an emits option to examples that emit events vuejs/docs@e554cd6#diff-0ddfe84e020022e6d0eef551720a870386146a8703934cd0cc00a952e651e402 * fix: update component-custom-events.md vuejs/docs@367358b#diff-0ddfe84e020022e6d0eef551720a870386146a8703934cd0cc00a952e651e402 * Changed a recommendation for custom events name casing vuejs/docs@2706494#diff-0ddfe84e020022e6d0eef551720a870386146a8703934cd0cc00a952e651e402 * fix: grammar and casing on video title vuejs/docs@5b9060a#diff-0ddfe84e020022e6d0eef551720a870386146a8703934cd0cc00a952e651e402 * Convert unexplained variables to arguments in an emits example vuejs/docs@2400973#diff-0ddfe84e020022e6d0eef551720a870386146a8703934cd0cc00a952e651e402
1 parent 6d5b8d0 commit c721f83

File tree

1 file changed

+26
-30
lines changed

1 file changed

+26
-30
lines changed

‎src/guide/component-custom-events.md

Lines changed: 26 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,21 @@
44
55
## イベント名
66

7-
コンポーネントやプロパティとは違い、イベント名の大文字と小文字は自動的に変換されません。その代わり発火されるイベント名とイベントリスナ名は全く同じにする必要があります。例えばキャメルケース(camelCase)のイベント名でイベントを発火した場合:
7+
コンポーネントやプロパティと同じように、イベント名は大文字と小文字を自動的に変換します。子コンポーネントからキャメルケースでイベントを発行すると、親コンポーネントではケバブケースのリスナを追加できるようになります:
88

99
```js
1010
this.$emit('myEvent')
1111
```
1212

13-
ケバブケース(kebab-case)でリスナ名を作っても何も起こりません:
14-
1513
```html
16-
<!-- Won't work -->
1714
<my-component @my-event="doSomething"></my-component>
1815
```
1916

20-
イベント名は JavaScript 内で変数やプロパティ名として扱われることはないので、キャメルケース(camelCase)またはパスカルケース(PascalCase)を使用する理由はありません。 さらに DOM テンプレート内の `v-on` イベントリスナは自動的に小文字に変換されます ( HTML が大文字と小文字を判別しないため)。このため `@myEvent` は `@myevent` になり `myEvent` にリスナが反応することができなくなります。
21-
22-
こういった理由から **いつもケバブケース(kebab-case)を使うこと** をお薦めします。
17+
[プロパティの形式](/guide/component-props.html#プロパティの形式-キャメルケース-vs-ケバブケース) と同じように、DOM 内テンプレートを使っている場合は、ケバブケースのイベントリスナを使うことをお勧めします。文字列テンプーとを使っている場合は、この制約は適用されません。
2318

2419
## カスタムイベントの定義
2520

26-
<VideoLesson href="https://vueschool.io/lessons/defining-custom-events-emits?friend=vuejs" title="Learn how to define which events a component can emit with Vue School">Watch a free video about Defining Custom Events on Vue School</VideoLesson>
21+
<VideoLesson href="https://vueschool.io/lessons/defining-custom-events-emits?friend=vuejs" title="Vue School でコンポーネントが発行できるイベントを定義する方法を学ぶ">Vue School でカスタムイベントの定義についての無料ビデオを視聴する</VideoLesson>
2722

2823
発行されたイベントは、 `emits` オプションを介して、コンポーネントで定義することが出来ます。
2924

@@ -33,8 +28,7 @@ app.component('custom-form', {
3328
})
3429
```
3530

36-
37-
ネイティブイベント（例、 `click` など）が `emits` オプションで定義されている場合、ネイティブリスナーとして扱われるのではなく、コンポーネントのイベントによって上書きされます。
31+
ネイティブイベント（例、 `click` など）が `emits` オプションで定義されている場合、ネイティブイベントリスナの **代わりに** コンポーネントのイベントが使われます。
3832

3933
::: tip
4034
コンポーネントの動作を実証するために、全ての発行されたイベントを定義することをお勧めします。
@@ -63,7 +57,7 @@ app.component('custom-form', {
6357
}
6458
},
6559
methods: {
66-
submitForm() {
60+
submitForm(email, password) {
6761
this.$emit('submit', { email, password })
6862
}
6963
}
@@ -75,28 +69,28 @@ app.component('custom-form', {
7569
デフォルトでは、コンポーネントの `v-model` はプロパティとして `modelValue` を使用し、イベントとして `update:modelValue` を使用します。`v-model` 引数を渡してこれらの名前の変更が出来ます。
7670

7771
```html
78-
<my-component v-model:foo="bar"></my-component>
72+
<my-component v-model:title="bookTitle"></my-component>
7973
```
80-
この場合、子コンポーネントは `foo` プロパティを期待し、同期するために `update:foo` イベントを発行します。
8174

82-
```js
83-
const app = Vue.createApp({})
75+
この場合、子コンポーネントは `title` プロパティを期待し、同期するために `update:title` イベントを発行します。
8476

77+
```js
8578
app.component('my-component', {
8679
props: {
87-
foo: String
80+
title: String
8881
},
82+
emits: ['update:title'],
8983
template: `
9084
<input
9185
type="text"
92-
:value="foo"
93-
@input="$emit('update:foo', $event.target.value)">
86+
:value="title"
87+
@input="$emit('update:title', $event.target.value)">
9488
`
9589
})
9690
```
9791

9892
```html
99-
<my-component v-model:foo="bar"></my-component>
93+
<my-component v-model:title="bookTitle"></my-component>
10094
```
10195

10296
## 複数の `v-model` のバインディング
@@ -113,13 +107,12 @@ app.component('my-component', {
113107
```
114108

115109
```js
116-
const app = Vue.createApp({})
117-
118110
app.component('user-name', {
119111
props: {
120112
firstName: String,
121113
lastName: String
122114
},
115+
emits: ['update:firstName', 'update:lastName'],
123116
template: `
124117
<input
125118
type="text"
@@ -138,16 +131,16 @@ app.component('user-name', {
138131

139132
## `v-model` 修飾子の処理
140133

141-
フォーム入力バインディングについて学習していたときに、 `v-model`に [組み込み修飾子](/guide/forms.html#modifiers) -`.trim` 、 `.number` 、および `.lazy` があることがわかりました。ただし、場合によっては、独自のカスタム修飾子を追加することもできます。
134+
フォーム入力バインディングについて学習していたときに、 `v-model` に [組み込み修飾子](/guide/forms.html#modifiers) - `.trim`、`.number`、および `.lazy` があることがわかりました。ただし、場合によっては、独自のカスタム修飾子を追加することもできます。
142135

143-
`v-model` バインディングによって提供される文字列の最初の文字を大文字にするカスタム修飾子の例、`capitalize`を作成してみましょう。
136+
`v-model` バインディングによって提供される文字列の最初の文字を大文字にするカスタム修飾子の例、`capitalize` を作成してみましょう。
144137

145138
コンポーネント `v-model` に追加された修飾子は、`modelModifiers` プロパティを介してコンポーネントに提供されます。以下の例では、デフォルトで空のオブジェクトになる `modelModifiers` プロパティを含むコンポーネントを作成しました。
146139

147-
コンポーネントの `created` ライフサイクルフックがトリガーされると、`modelModifiers` プロパティには `capitalize` が含まれ、その値は`true` になります。これは、 `v-model` バインディングに `v-model.capitalize = "var"` が設定されているためです。
140+
コンポーネントの `created` ライフサイクルフックがトリガーされると、`modelModifiers` プロパティには `capitalize` が含まれ、その値は `true` になります。これは、 `v-model` バインディングに `v-model.capitalize="myText"` が設定されているためです。
148141

149142
```html
150-
<my-component v-model.capitalize="bar"></my-component>
143+
<my-component v-model.capitalize="myText"></my-component>
151144
```
152145

153146
```js
@@ -158,6 +151,7 @@ app.component('my-component', {
158151
default: () => ({})
159152
}
160153
},
154+
emits: ['update:modelValue'],
161155
template: `
162156
<input type="text"
163157
:value="modelValue"
@@ -194,6 +188,7 @@ app.component('my-component', {
194188
default: () => ({})
195189
}
196190
},
191+
emits: ['update:modelValue'],
197192
methods: {
198193
emitValue(e) {
199194
let value = e.target.value
@@ -215,19 +210,20 @@ app.mount('#app')
215210
引数を持つ `v-model` バインディングの場合、生成されるプロパティ名は `arg + "Modifiers"` になります。
216211

217212
```html
218-
<my-component v-model:foo.capitalize="bar"></my-component>
213+
<my-component v-model:description.capitalize="myText"></my-component>
219214
```
220215

221216
```js
222217
app.component('my-component', {
223-
props: ['foo', 'fooModifiers'],
218+
props: ['description', 'descriptionModifiers'],
219+
emits: ['update:description'],
224220
template: `
225221
<input type="text"
226-
:value="foo"
227-
@input="$emit('update:foo', $event.target.value)">
222+
:value="description"
223+
@input="$emit('update:description', $event.target.value)">
228224
`,
229225
created() {
230-
console.log(this.fooModifiers) // { capitalize: true }
226+
console.log(this.descriptionModifiers) // { capitalize: true }
231227
}
232228
})
233229
```

0 commit comments

Comments
 (0)