File tree 13 files changed +24
-24
lines changed
13 files changed +24
-24
lines changed Original file line number Diff line number Diff line change @@ -200,7 +200,7 @@ export const sidebar: ThemeConfig['sidebar'] = {
200
200
text : '登録' ,
201
201
link : '/guide/components/registration'
202
202
} ,
203
- { text : 'プロパティ ' , link : '/guide/components/props' } ,
203
+ { text : 'props ' , link : '/guide/components/props' } ,
204
204
{ text : 'イベント' , link : '/guide/components/events' } ,
205
205
{ text : 'コンポーネントの v-model' , link : '/guide/components/v-model' } ,
206
206
{
Original file line number Diff line number Diff line change 84
84
- 利用可能なインジェクションで検索するキー(文字列またはシンボル)、または
85
85
- 次のようなオブジェクト:
86
86
- ` from ` プロパティは、利用可能なインジェクションを検索するためのキー(文字列またはシンボル)になっている。さらに
87
- - ` default ` プロパティは、フォールバック値として使用されます。コンポーネントプロパティのデフォルト値と同様に 、複数のコンポーネントインスタンス間での値の共有を避けるために、オブジェクトタイプにもファクトリ関数が必要です。
87
+ - ` default ` プロパティは、フォールバック値として使用されます。コンポーネント props のデフォルト値と同様に 、複数のコンポーネントインスタンス間での値の共有を避けるために、オブジェクトタイプにもファクトリ関数が必要です。
88
88
89
89
一致するプロパティもデフォルト値も提供されなかった場合、注入されたプロパティは ` undefined ` となります。
90
90
Original file line number Diff line number Diff line change 81
81
Vue では、コンポーネント props はすべて明示的に宣言する必要があります。コンポーネント props は、2 つの形式で宣言できます:
82
82
83
83
- 文字列の配列を使用したシンプルな形式
84
- - キーが props 名、値が props の型(コンストラクタ関数)または詳細オプションになっているオブジェクトを使用した完全な形式
84
+ - オブジェクトを使用した完全な形式。各プロパティのキーが props 名で、値は props の型(コンストラクタ関数)または詳細オプションになっているもの
85
85
86
86
オブジェクトベースの構文では、各 props はさらに以下のオプションを定義できます:
87
87
393
393
発行されるイベントは、次の 2 つの形式で宣言できます:
394
394
395
395
- 文字列の配列を使用したシンプルな形式
396
- - 各プロパティのキーがイベントの名前で、値が ` null ` またはバリデータ関数のいずれかであるオブジェクトを使用した完全な形式。
396
+ - オブジェクトを使用した完全な形式。各プロパティのキーがイベント名で、値は ` null ` またはバリデータ関数になっているもの
397
397
398
398
バリデーション関数は、コンポーネントの ` $emit ` 呼び出しに渡された追加の引数を受け取ります。 たとえば、 ` this .$emit (' foo' , 1 )` が呼び出された場合、対応する ` foo ` のバリデータは引数 ` 1 ` を受け取ります。バリデータ関数は、イベントの引数が妥当かどうかを示す真偽値を返す必要があります。
399
399
Original file line number Diff line number Diff line change @@ -234,7 +234,7 @@ Vue では、**props** という用語の一般的な使い方が 3 つありま
234
234
235
235
すべての場合において、props は他の場所から渡されるプロパティです。
236
236
237
- props の語源は ** properties** ですが、Vue の文脈では props という用語はより具体的な意味を持っています。properties の略語として使用することは避けてください 。
237
+ props の語源は ** properties** (プロパティ) ですが、Vue の文脈では props という用語はより具体的な意味を持っています。プロパティの略語として使用することは避けてください 。
238
238
239
239
詳しくはこちらをご覧ください:
240
240
- [ ガイド - props] ( /guide/components/props.html )
Original file line number Diff line number Diff line change @@ -161,7 +161,7 @@ Vue Router には、動的インポートを使用した [lazily loading compone
161
161
</Suspense>
162
162
```
163
163
164
- もし ` suspensible ` プロパティを設定しなかった場合 、内側の ` <Suspense> ` は親の ` <Suspense> ` から同期コンポーネントとして扱われます。つまり、独自のフォールバックスロットを持つことになり、両方の ` Dynamic ` コンポーネントが同時に変更された場合、子の ` <Suspense> ` が自身の依存関係ツリーをロードしている間に、空のノードや複数のパッチサイクルが発生する可能性があり、これは望ましくありません。` suspensible ` が設定されていると、非同期な依存処理はすべて親の ` <Suspense> ` に委ねられ(発行されるイベントも含まれます)、内側の ` <Suspense> ` は依存関係の解決とパッチのための別の境界としてのみ機能します。
164
+ もし ` suspensible ` props を設定しなかった場合 、内側の ` <Suspense> ` は親の ` <Suspense> ` から同期コンポーネントとして扱われます。つまり、独自のフォールバックスロットを持つことになり、両方の ` Dynamic ` コンポーネントが同時に変更された場合、子の ` <Suspense> ` が自身の依存関係ツリーをロードしている間に、空のノードや複数のパッチサイクルが発生する可能性があり、これは望ましくありません。` suspensible ` が設定されていると、非同期な依存処理はすべて親の ` <Suspense> ` に委ねられ(発行されるイベントも含まれます)、内側の ` <Suspense> ` は依存関係の解決とパッチのための別の境界としてのみ機能します。
165
165
166
166
---
167
167
Original file line number Diff line number Diff line change @@ -82,7 +82,7 @@ import ListStagger from './transition-demos/ListStagger.vue'
82
82
83
83
### カスタムトランジションクラス {#custom-transitiongroup-classes}
84
84
85
- [ ` <Transition> ` のカスタムトランジションクラス] ( /guide/built-ins/transition.html#custom-transition-classes ) と同様に、` <TransitionGroup> ` に ` moveClass ` プロパティを渡すことで 、移動する要素のカスタムトランジションクラスを指定することもできます。
85
+ [ ` <Transition> ` のカスタムトランジションクラス] ( /guide/built-ins/transition.html#custom-transition-classes ) と同様に、` <TransitionGroup> ` に ` moveClass ` props を渡すことで 、移動する要素のカスタムトランジションクラスを指定することもできます。
86
86
87
87
## 時差をもたせたリストのトランジション {#staggering-list-transitions}
88
88
Original file line number Diff line number Diff line change @@ -121,7 +121,7 @@ defineProps<{
121
121
122
122
## リアクティブな props の分割代入 <sup class =" vt-badge " data-text =" 3.5+ " /> \*\* {#reactive-props-destructure}
123
123
124
- Vue のリアクティビティシステムは、プロパティアクセスに基づいて状態の使用を追跡します。例えば、算出プロパティやウォッチャーで ` props.foo ` にアクセスすると、` foo ` プロパティが依存関係として追跡されます 。
124
+ Vue のリアクティビティシステムは、プロパティアクセスに基づいて状態の使用を追跡します。例えば、算出プロパティやウォッチャーで ` props.foo ` にアクセスすると、` foo ` props は依存関係として追跡されます 。
125
125
126
126
そこで、以下のようなコードを考えます:
127
127
Original file line number Diff line number Diff line change @@ -300,13 +300,13 @@ const posts = ref([
300
300
301
301
動的な props の値を渡すための [ ` v-bind ` 構文] ( /api/built-in-directives#v-bind ) (` :title="post.title" ` )の使い方に注目してください。これは、レンダリングするコンテンツを事前に正確に把握していない場合に特に役立ちます。
302
302
303
- props については以上となりますが、このページを読み終え内容に慣れてきたら、後ほど[ props] ( /guide/components/props ) の完全ガイドを読みにくることをおすすめします。
303
+ props については以上となりますが、このページを読み終え内容に慣れてきたら、後ほど [ props] ( /guide/components/props ) の完全ガイドを読みにくることをおすすめします。
304
304
305
305
## イベントの購読 {#listening-to-events}
306
306
307
307
` <BlogPost> ` コンポーネントを開発していく中で、いくつかの機能については、親コンポーネントへの通信が必要になるかもしれません。例えば、ブログ記事のテキストを拡大し、ページの残りの部分はデフォルトのサイズのままにしておくアクセシビリティー機能を含めることにするかもしれません。
308
308
309
- 親コンポーネントの中では、` postFontSize ` という <span class =" options-api " >data property </span ><span class =" composition-api " >ref</span > を追加することで、この機能をサポートできます:
309
+ 親コンポーネントの中では、` postFontSize ` という <span class =" options-api " >data プロパティ </span ><span class =" composition-api " >ref </span >を追加することで、この機能をサポートできます:
310
310
311
311
<div class =" options-api " >
312
312
Original file line number Diff line number Diff line change @@ -93,7 +93,7 @@ export default {
93
93
94
94
ここでは、` publishedBooksMessage ` という算出プロパティを宣言しています。
95
95
96
- アプリケーションの ` data ` プロパティ内の ` books ` 配列の値を変更してみると、それに応じて ` publishedBooksMessage ` の結果がどのように変化しているかがわかります。
96
+ アプリケーションの ` data ` 内の ` books ` 配列の値を変更してみると、それに応じて ` publishedBooksMessage ` の結果がどのように変化しているかがわかります。
97
97
98
98
通常のプロパティと同じように、テンプレート内の算出プロパティにデータバインドすることもできます。Vue は ` this.publishedBooksMessage ` が ` this.author.books ` に依存していることを知っているので、` this.author.books ` が変わると ` this.publishedBooksMessage ` に依存する全てのバインディングを更新します。
99
99
@@ -116,7 +116,7 @@ const author = reactive({
116
116
]
117
117
})
118
118
119
- // 算出プロパティの参照
119
+ // 算出 ref
120
120
const publishedBooksMessage = computed(() => {
121
121
return author.books.length > 0 ? 'Yes' : 'No'
122
122
})
@@ -263,9 +263,9 @@ const fullName = computed({
263
263
264
264
- 3.4 以上でのみサポートされています
265
265
266
-
267
266
必要であれば、ゲッターの第 1 引数にアクセスすることで、算出プロパティが前回返した値を取得できます:
268
267
268
+
269
269
<div class =" options-api " >
270
270
271
271
``` js
Original file line number Diff line number Diff line change @@ -432,7 +432,7 @@ methods: {
432
432
</ul>
433
433
```
434
434
435
- 算出プロパティの中で ` reverse() ` と ` sort() ` を使用するときは注意してください!これら 2 つのメソッドには、算出プロパティのゲッターの中では避けるべき、元の配列を変更するという作用があります 。以下のように、これらのメソッドを呼び出す前には元の配列のコピーを作成します:
435
+ 算出プロパティの中で ` reverse() ` と ` sort() ` を使用するときは注意してください!これら 2 つのメソッドは元の配列を変更するため、算出プロパティのゲッターの中では避けるべきです 。以下のように、これらのメソッドを呼び出す前には元の配列のコピーを作成します:
436
436
437
437
``` diff
438
438
- return numbers.reverse()
Original file line number Diff line number Diff line change @@ -362,7 +362,7 @@ watchEffect(async () => {
362
362
363
363
- ` watch ` は明示的に示されたソースしか監視しません。コールバック内でアクセスされたものは追跡しません。加えて、コールバックはソースが実際に変更したときにのみ実行されます。` watch ` は依存関係の追跡を副作用から分離します。それにより、コールバックをいつ実行するかをより正確にコントロールすることができます。
364
364
365
- - それに対して、` watchEffect ` は依存先の追跡と副作用を 1 つのフェーズにまとめたものになります。同期処理を実行している間にアクセスしたすべてのリアクティブのプロパティを自動的に追跡します 。これにより、より便利で一般的にコードが短くなりますが、そのリアクティブの依存先はあまり明示的にならなくなってしまいます。
365
+ - それに対して、` watchEffect ` は依存先の追跡と副作用を 1 つのフェーズにまとめたものになります。同期処理を実行している間にアクセスしたすべてのリアクティブなプロパティを自動的に追跡します 。これにより、より便利で一般的にコードが短くなりますが、そのリアクティブの依存先はあまり明示的にならなくなってしまいます。
366
366
367
367
</div >
368
368
Original file line number Diff line number Diff line change @@ -362,11 +362,11 @@ type DefineCustomElement<
362
362
SelectedAttributes extends keyof ElementType = keyof ElementType
363
363
> = new () => ElementType & {
364
364
// テンプレート型のチェックに公開されるプロパティを定義するには、$props を使用します。
365
- // Vue は、特に `$props` 型からプロパティ定義を読み取ります。要素のプロパティを
366
- // グローバルな HTML プロパティと Vue の特別なプロパティと組み合わせることに
365
+ // Vue は、特に `$props` 型から props 定義を読み取ります。要素の props を
366
+ // グローバルな HTML props と Vue の特別な props と組み合わせることに
367
367
// 注意してください。
368
368
/** @deprecated カスタム要素参照では、$props プロパティを使用しないでください。
369
- これはテンプレートプロパティ型専用です 。 */
369
+ これはテンプレート props 型専用です 。 */
370
370
$props: HTMLAttributes &
371
371
Partial <Pick <ElementType , SelectedAttributes >> &
372
372
PublicProps
@@ -375,7 +375,7 @@ type DefineCustomElement<
375
375
// Vue は、イベントタイプを`$emit`タイプから読み取ります。
376
376
// `$emit` は、`Events` にマッピングする特定のフォーマットを必要とします。
377
377
/** @deprecated カスタム要素参照では $emit プロパティを使用しないでください。
378
- これはテンプレートプロパティ型専用です 。 */
378
+ これはテンプレート props 型専用です 。 */
379
379
$emit: VueEmit <Events >
380
380
}
381
381
Original file line number Diff line number Diff line change 1
- # 算出プロパティー {#computed-property}
1
+ # 算出プロパティ {#computed-property}
2
2
3
- 前回のステップで作成した TODO リストの上に追加していきましょう。ここでは各 TODO にトグル機能を追加していきます。これは各 TODO オブジェクトに ` done ` プロパティーを追加して 、チェックボックスにそれをバインドするために ` v-model ` を使います:
3
+ 前回のステップで作成した TODO リストの上に追加していきましょう。ここでは各 TODO にトグル機能を追加していきます。これは各 TODO オブジェクトに ` done ` プロパティを追加して 、チェックボックスにそれをバインドするために ` v-model ` を使います:
4
4
5
5
``` vue-html{2}
6
6
<li v-for="todo in todos">
13
13
14
14
<div class =" options-api " >
15
15
16
- <a target =" _blank " href =" /guide/essentials/computed.html " >算出プロパティー </a >の紹介です。他のプロパティーからリアクティブに算出されたプロパティーを ` computed ` オプションを使用して宣言することができます:
16
+ <a target =" _blank " href =" /guide/essentials/computed.html " >算出プロパティ </a >の紹介です。他のプロパティからリアクティブに算出されたプロパティを ` computed ` オプションを使用して宣言することができます:
17
17
18
18
<div class =" sfc " >
19
19
@@ -99,6 +99,6 @@ createApp({
99
99
+ <li v-for="todo in filteredTodos">
100
100
```
101
101
102
- 算出プロパティーは 、その計算の中で使用される他のリアクティブステートを依存関係として追跡します。計算結果はキャッシュされて、依存関係が変更されると自動的に更新されます。
102
+ 算出プロパティは 、その計算の中で使用される他のリアクティブステートを依存関係として追跡します。計算結果はキャッシュされて、依存関係が変更されると自動的に更新されます。
103
103
104
- では、 ` filteredTodos ` の算出プロパティーを追加して 、その算出ロジックを実装してみましょう! 正しく実装されていれば、完了したアイテムを非表示にするときに、TODO のチェックをオフにすると、すぐにそのアイテムも非表示になるはずです。
104
+ では、 ` filteredTodos ` の算出プロパティを追加して 、その算出ロジックを実装してみましょう! 正しく実装されていれば、完了したアイテムを非表示にするときに、TODO のチェックをオフにすると、すぐにそのアイテムも非表示になるはずです。
You can’t perform that action at this time.
0 commit comments