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
Or, for the more advanced component syntax with options:
26
+
もしくはオプションのついた、より高度なコンポーネント構文の場合は:
27
27
28
28
```js
29
29
constasyncModal= {
@@ -35,19 +35,19 @@ const asyncModal = {
35
35
}
36
36
```
37
37
38
-
## 3.x Syntax
38
+
## 3.x の構文
39
39
40
-
Now, in Vue 3, since functional components are defined as pure functions, async components definitions need to be explicitly defined by wrapping it in a new `defineAsyncComponent`helper:
Vue Router supports a similar mechanism for asynchronously loading route components, known as *lazy loading*. Despite the similarities, this feature is distinct from Vue's support for async components. You should **not** use `defineAsyncComponent` when configuring route components with Vue Router. You can read more about this in the [Lazy Loading Routes](https://router.vuejs.org/guide/advanced/lazy-loading.html)section of the Vue Router documentation.
Another change that has been made from 2.x is that the `component`option is now renamed to `loader`in order to accurately communicate that a component definition cannot be provided directly.
Vue 3 now offers an `emits` option, similar to the existing `props` option. This option can be used to define the events that a component can emit to its parent.
@@ -47,51 +47,51 @@ Similar to props, the events that the component emits can now be defined with th
47
47
</script>
48
48
```
49
49
50
-
The option also accepts an object, which allows the developer to define validators for the arguments that are passed with the emitted event, similar to validators in `props`definitions.
This is especially important because of [the removal of the `.native`modifier](./v-on-native-modifier-removed.md). Any listeners for events that aren't declared with `emits`will now be included in the component's `$attrs`, which by default will be bound to the component's root node.
When a parent listens for the `click`event on the component:
75
+
親がコンポーネントの `click`イベントを購読する場合:
76
76
77
77
```html
78
78
<my-buttonv-on:click="handleClick"></my-button>
79
79
```
80
80
81
-
it would now be triggered _twice_:
81
+
これは**2 回**トリガーされます:
82
82
83
-
-Once from `$emit()`.
84
-
-Once from a native event listener applied to the root element.
83
+
-`$emit()` から 1 回。
84
+
-ルート要素に適用されるネイティブイベントリスナーから 1 回。
85
85
86
-
Here you have two options:
86
+
ここで、2 つの選択肢があります:
87
87
88
-
1.Properly declare the `click`event. This is useful if you actually do add some logic to that event handler in `<my-button>`.
89
-
2.Remove the re-emitting of the event, since the parent can now listen for the native event easily, without adding `.native`. Suitable when you really only re-emit the event anyway.
In Vue 2, functional components had two primary use cases:
21
+
Vue 2 では、関数型コンポーネントには 2 つの主なユースケースがありました:
22
22
23
-
-as a performance optimization, because they initialized much faster than stateful components
24
-
-to return multiple root nodes
23
+
-ステートフルコンポーネントよりもはるかに高速に初期化されるので、パフォーマンスの最適化として
24
+
-複数のルートノードを返すため
25
25
26
-
However, in Vue 3, the performance of stateful components has improved to the point that the difference is negligible. In addition, stateful components now also include the ability to return multiple root nodes.
As a result, the only remaining use case for functional components is simple components, such as a component to create a dynamic heading. Otherwise, it is recommended to use stateful components as you normally would.
Using the `<dynamic-heading>` component, which is responsible for rendering out the appropriate heading (i.e., `h1`, `h2`, `h3`, etc.), this could have been written as a single-file component in 2.x as:
Or, for those who preferred the `<template>`in a single-file component:
45
+
あるいは、単一ファイルコンポーネントの `<template>`を好む場合は:
46
46
47
47
```vue
48
-
<!-- Vue 2 Functional Component Example with <template> -->
48
+
<!-- Vue 2 で <template> を使った関数型コンポーネントの例 -->
49
49
<template functional>
50
50
<component
51
51
:is="`h${props.level}`"
@@ -61,17 +61,17 @@ export default {
61
61
</script>
62
62
```
63
63
64
-
## 3.x Syntax
64
+
## 3.x の構文
65
65
66
-
### Components Created by Functions
66
+
### 関数で作られるコンポーネント
67
67
68
-
Now in Vue 3, all functional components are created with a plain function. In other words, there is no need to define the `{ functional: true }`component option.
They will receive two arguments: `props`and`context`. The `context`argument is an object that contains a component's `attrs`, `slots`, and `emit`properties.
In 3.x, the performance difference between stateful and functional components has been drastically reduced and will be insignificant in most use cases. As a result, the migration path for developers using `functional`on SFCs is to remove the attribute and rename all references of `props`to`$props`and `attrs` to `$attrs`.
0 commit comments