You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In 3.x, the `$children`property is removed and no longer supported. Instead, if you need to access a child component instance, we recommend using [template refs](https://ja.vuejs.org/guide/essentials/template-refs.html#template-refs).
In 2.x, a Vue instance could be used to trigger handlers attached imperatively via the event emitter API (`$on`, `$off` and `$once`). This could be used to create an _event bus_ to create global event listeners used across the whole application:
We removed `$on`, `$off` and `$once`methods from the instance completely. `$emit`is still a part of the existing API as it's used to trigger event handlers declaratively attached by a parent component.
57
+
インスタンスから `$on`、`$off`、`$once`メソッドを完全に削除しました。`$emit`は、親コンポーネントから宣言的にアタッチされたイベントハンドラーをトリガーするために使用されるため、依然として API の一部です。
In Vue 3, it is no longer possible to use these APIs to listen to a component's own emitted events from within a component. There is no migration path for that use case.
63
+
Vue 3 では、これらの API を使用して、コンポーネント内部からコンポーネント自身が発行したイベントを購読できなくなりました。そのユースケースのための移行経路はありません。
64
64
65
-
### Root Component Events
65
+
### ルートコンポーネントイベント
66
66
67
-
Static event listeners can be added to the root component by passing them as props to `createApp`:
The event bus pattern can be replaced by using an external library implementing the event emitter interface, for example [mitt](https://github.com/developit/mitt)or[tiny-emitter](https://github.com/scottcorgan/tiny-emitter).
This provides the same event emitter API as in Vue 2.
96
+
これは、Vue 2 と同じイベントエミッターAPI を提供します。
97
97
98
-
In most circumstances, using a global event bus for communicating between components is discouraged. While it is often the simplest solution in the short term, it almost invariably proves to be a maintenance headache in the long term. Depending on the circumstances, there are various alternatives to using an event bus:
*Props and events should be your first choice for parent-child communication. Siblings can communicate via their parent.
101
-
*Provide / inject allow a component to communicate with its slot contents. This is useful for tightly-coupled components that are always used together.
102
-
*Provide / inject can also be used for long-distance communication between components. It can help to avoid 'prop drilling', where props need to be passed down through many levels of components that don't need those props themselves.
103
-
*Prop drilling can also be avoided by refactoring to use slots. If an interim component doesn't need the props then it might indicate a problem with separation of concerns. Introducing a slot in that component allows the parent to create the content directly, so that props can be passed without the interim component needing to get involved.
104
-
*[Global state management](https://ja.vuejs.org/guide/scaling-up/state-management.html), such as [Pinia](https://pinia.vuejs.org/).
Filters are removed from Vue 3.0 and no longer supported.
10
+
Vue 3.0 からフィルターは削除され、サポートされなくなりました。
11
11
12
-
## 2.x Syntax
12
+
## 2.x の構文
13
13
14
-
In 2.x, developers could use filters in order to apply common text formatting.
14
+
2.x では、開発者はフィルターを使用して、共通のテキストフォーマットを適用できました。
15
15
16
-
For example:
16
+
例えば:
17
17
18
18
```html
19
19
<template>
@@ -38,13 +38,13 @@ For example:
38
38
</script>
39
39
```
40
40
41
-
While this seems like a convenience, it requires a custom syntax that breaks the assumption of expressions inside curly braces being "just JavaScript," which has both learning and implementation costs.
If you are using filters that were globally registered and then used throughout your app, it's likely not convenient to replace them with computed properties or methods in each individual component.
Instead, you can make your global filters available to all components through [globalProperties](https://ja.vuejs.org/api/application.html#app-config-globalproperties):
@@ -104,4 +104,4 @@ Then you can fix all templates using this `$filters` object like this:
104
104
</template>
105
105
```
106
106
107
-
Note that with this approach, you can only use methods, not computed properties, as the latter only make sense when defined in the context of an individual component.
Support for the [inline-template feature](https://v2.ja.vuejs.org/v2/guide/components-edge-cases#%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88) has been removed.
In 2.x, Vue provided the `inline-template`attribute on child components to use its inner content as its template instead of treating it as distributed content.
The most straightforward workaround in such cases is using `<script>`with an alternative type:
37
+
このような場合の最も簡単な回避策は、代替の type 属性で `<script>`を使うことです:
38
38
39
39
```html
40
40
<scripttype="text/html"id="my-comp-template">
41
41
<div>{{ hello }}</div>
42
42
</script>
43
43
```
44
44
45
-
And in the component, target the template using a selector:
45
+
そしてコンポーネントでは、セレクターを使ってテンプレートをターゲットにします:
46
46
47
47
```js
48
48
constMyComp= {
@@ -51,34 +51,34 @@ const MyComp = {
51
51
}
52
52
```
53
53
54
-
This doesn't require any build setup, works in all browsers, is not subject to any in-DOM HTML parsing caveats (e.g. you can use camelCase prop names), and provides proper syntax highlighting in most IDEs. In traditional server-side frameworks, these templates can be split out into server template partials (included into the main HTML template) for better maintainability.
54
+
これは、ビルドのセットアップを必要とせず、すべてのブラウザーで動作し、DOM 内の HTML パースの注意点（例えば、camelCase のプロパティ名を使用できる）に左右されず、ほとんどの IDE で適切なシンタックスハイライトを提供します。従来のサーバーサイドフレームワークでは、これらのテンプレートは保守性を高めるために、サーバーテンプレートのパーシャル（メインの HTML テンプレートに含まれる）に分割できます。
55
55
56
-
### Option#2: Default Slot
56
+
### 選択肢#2: デフォルトスロット
57
57
58
-
A component previously using `inline-template`can also be refactored using the default slot - which makes the data scoping more explicit while preserving the convenience of writing child content inline:
0 commit comments