From dec2d46e6ba8e01ab1027d3d00b33968af19c1df Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Sat, 10 Jul 2021 11:00:38 +0900 Subject: [PATCH 1/2] docs: translate api references > option > composition --- src/api/options-assets.md | 25 ++++---- src/api/options-composition.md | 112 ++++++++++++++++----------------- 2 files changed, 70 insertions(+), 67 deletions(-) diff --git a/src/api/options-assets.md b/src/api/options-assets.md index e19d4362..37ccdd15 100644 --- a/src/api/options-assets.md +++ b/src/api/options-assets.md @@ -1,14 +1,14 @@ -# Assets +# アセット ## directives -- **Type:** `Object` +- **型:** `Object` -- **Details:** +- **詳細:** - A hash of directives to be made available to the component instance. + そのコンポーネントインスタンスで利用可能なディレクティブのハッシュです。 -- **Usage:** +- **使用方法:** ```js const app = createApp({}) @@ -21,21 +21,24 @@ } } }, + template: `` }) ``` -- **See also:** [Custom Directives](../guide/custom-directive.html) +- **参照:** [カスタムディレクティブ](../guide/custom-directive.html) ## components -- **Type:** `Object` +- **型:** `Object` + +- **詳細:** + + そのコンポーネントインスタンスで利用可能なコンポーネントのハッシュです -- **Details:** - A hash of components to be made available to the component instance. -- **Usage:** +- **使用方法:** ```js const Foo = { @@ -50,4 +53,4 @@ }) ``` -- **See also:** [Components](../guide/component-basics.html) +- **参照:** [コンポーネント](../guide/component-basics.html) diff --git a/src/api/options-composition.md b/src/api/options-composition.md index ac850701..2817fa77 100644 --- a/src/api/options-composition.md +++ b/src/api/options-composition.md @@ -2,15 +2,15 @@ ## mixins -- **Type:** `Array` +- **型:** `Array` -- **Details:** +- **詳細:** - The `mixins` option accepts an array of mixin objects. These mixin objects can contain instance options like normal instance objects, and they will be merged against the eventual options using the certain option merging logic. For example, if your mixin contains a `created` hook and the component itself also has one, both functions will be called. + `mixins` オプションは、ミックスインオブジェクトの配列を受け入れます。これらのミックスインオブジェクトは、通常のインスタンスオブジェクトと同じようにインスタンスオプションを含めることができ、それらは一定のオプションをマージするロジックを使って、最終的なオプションに対してマージされます。例えば、あなたのミックスインが `created` フックを含み、コンポーネントそれ自身にも `created` フックがある場合、両方の関数が呼び出されます。 - Mixin hooks are called in the order they are provided, and called before the component's own hooks. + ミックスインフックは提供された順番に呼び出され、コンポーネント自身のフックよりも前に呼び出されます。 -- **Example:** +- **例:** ```js const mixin = { @@ -30,24 +30,24 @@ // => 2 ``` -- **See also:** [Mixins](../guide/mixins.html) +- **参照:** [ミックスイン](../guide/mixins.html) ## extends -- **Type:** `Object | Function` +- **型:** `Object | Function` -- **Details:** +- **詳細:** - Allows declaratively extending another component (could be either a plain options object or a constructor). This is primarily intended to make it easier to extend between single file components. + 別のコンポーネントを宣言的に拡張できます（純粋なオプションオブジェクトまたはコンストラクタのどちらでも）。これは主に単一ファイルコンポーネント間の拡張を簡単にすることを目的としています。 - This is similar to `mixins`. + これは `mixins` に似ています。 -- **Example:** +- **例:** ```js const CompA = { ... } - // extend CompA without having to call `Vue.extend` on either + // CompA を `Vue.extend` の呼び出しなしで拡張します const CompB = { extends: CompA, ... @@ -56,32 +56,32 @@ ## provide / inject -- **Type:** +- **型:** - **provide:** `Object | () => Object` - **inject:** `Array | { [key: string]: string | Symbol | Object }` -- **Details:** +- **詳細:** - This pair of options are used together to allow an ancestor component to serve as a dependency injector for all its descendants, regardless of how deep the component hierarchy is, as long as they are in the same parent chain. If you are familiar with React, this is very similar to React's `context` feature. + この一組のオプションを一緒に使うことで、コンポーネント階層の深さに関わらず、それらが同じ親チェーンにある限り、祖先のコンポーネントがその子孫コンポーネントすべての依存オブジェクトの注入役として機能することができます。React に慣れている方には、これは React の `context` の機能と非常によく似ています。 - The `provide` option should be an object or a function that returns an object. This object contains the properties that are available for injection into its descendants. You can use ES2015 Symbols as keys in this object, but only in environments that natively support `Symbol` and `Reflect.ownKeys`. + `provide` オプションは、オブジェクトまたはオブジェクトを返す関数でなければなりません。このオブジェクトは、その子孫に注入可能なプロパティを含みます。このオブジェクトのキーには ES2015 の Symbol を使うことができますが、ネイティブで `Symbol` と `Reflect.ownKeys` をサポートしている環境でのみ有効です。 - The `inject` option should be either: + `inject` オプションは、次のいずれかでなければなりません: - - an array of strings, or - - an object where the keys are the local binding name and the value is either: - - the key (string or Symbol) to search for in available injections, or - - an object where: - - the `from` property is the key (string or Symbol) to search for in available injections, and - - the `default` property is used as fallback value + - 文字列の配列、もしくは + - キーがローカルのバインディング名で、値が次のいずれかであるオブジェクト: + - 利用可能な注入オブジェクトを検索するためのキー（文字列または Symbol）、または + - オブジェクトが: + - `from` プロパティは利用可能な注入オブジェクトを検索するためのキー（文字列または Symbol）、そして + - `default` プロパティはフォールバック値として使われます - > Note: the `provide` and `inject` bindings are NOT reactive. This is intentional. However, if you pass down a reactive object, properties on that object do remain reactive. + > 注意: `provide` と `inject` のバインディングはリアクティブではありません。これは意図的なものです。ただし、あなたがリアクティブなオブジェクトを渡した場合、そのオブジェクトのプロパティはリアクティブなままです。 -- **Example:** +- **例:** ```js - // parent component providing 'foo' + // 'foo' を提供している親コンポーネント const Provider = { provide: { foo: 'bar' @@ -89,7 +89,7 @@ // ... } - // child component injecting 'foo' + // 'foo' を注入している子コンポーネント const Child = { inject: ['foo'], created() { @@ -99,7 +99,7 @@ } ``` - With ES2015 Symbols, function `provide` and object `inject`: + ES2015 の Symbol で、`provide` 関数と `inject` オブジェクトを使います: ```js const s = Symbol() @@ -118,7 +118,7 @@ } ``` - Using an injected value as the default for a prop: + 注入された値をプロパティのデフォルトとして使います: ```js const Child = { @@ -133,7 +133,7 @@ } ``` - Using an injected value as data entry: + 注入された値をデータプロパティの登録に使います: ```js const Child = { @@ -146,7 +146,7 @@ } ``` - Injections can be optional with default value: + 注入はデフォルト値で任意にできます: ```js const Child = { @@ -156,7 +156,7 @@ } ``` - If it needs to be injected from a property with a different name, use `from` to denote the source property: + 別の名前のプロパティから注入する必要がある場合は、`from` を使って元のプロパティを指定します: ```js const Child = { @@ -169,7 +169,7 @@ } ``` - Similar to prop defaults, you need to use a factory function for non-primitive values: + プロパティのデフォルトと同じように、プリミティブ値以外はファクトリ関数を使う必要があります: ```js const Child = { @@ -182,21 +182,21 @@ } ``` -- **See also:** [Provide / Inject](../guide/component-provide-inject.html) +- **参照:** [Provide / Inject](../guide/component-provide-inject.html) ## setup -- **Type:** `Function` +- **型:** `Function` -The `setup` function is a new component option. It serves as the entry point for using the Composition API inside components. +`setup` 関数は、新しいコンポーネントオプションです。この関数は、コンポーネント内で Composition API を使うためのエントリポイントになります。 -- **Invocation Timing** +- **呼び出しのタイミング** - `setup` is called right after the initial props resolution when a component instance is created. Lifecycle-wise, it is called before the [beforeCreate](./options-lifecycle-hooks.html#beforecreate) hook. + `setup` は、コンポーネントインスタンスが作成されたとき、初期プロパティの解決の直後に呼び出されます。ライフサイクル的には、[beforeCreate](./options-lifecycle-hooks.html#beforecreate) フックの前に呼び出されます。 -- **Usage with Templates** +- **テンプレートでの利用** - If `setup` returns an object, the properties on the object will be merged on to the render context for the component's template: + `setup` がオブジェクトを返す場合、そのオブジェクトのプロパティはコンポーネントのテンプレートのレンダリングコンテキストにマージされます: ```html