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
> This page assumes you've already read the [Components Basics](/guide/essentials/component-basics). Read that first if you are new to components.
5
+
> Cette page suppose que vous avez déjà lu les [bases à propos des composants](/guide/essentials/component-basics). Lisez-les d'abord si vous débutez avec les composants.
6
6
7
-
A Vue component needs to be "registered" so that Vue knows where to locate its implementation when it is encountered in a template. There are two ways to register components: global and local.
7
+
Un composant Vue doit être "enregistré" afin que Vue sache où localiser son implémentation lorsqu'il est rencontré dans un template. Il existe deux façons d'enregistrer des composants : globale et locale.
8
8
9
-
## Global Registration
9
+
## Enregistrement global {#global-registration}
10
10
11
-
We can make components available globally in the current [Vue application](/guide/essentials/application.html)using the `app.component()`method:
11
+
Nous pouvons rendre les composants disponibles globalement dans l'[application Vue](/guide/essentials/application.html)actuelle en utilisant la méthode `app.component()` :
12
12
13
13
```js
14
14
import { createApp } from'vue'
15
15
16
16
constapp=createApp({})
17
17
18
18
app.component(
19
-
//the registered name
19
+
//le nom enregistré
20
20
'MyComponent',
21
-
//the implementation
21
+
//l'implémentation
22
22
{
23
23
/* ... */
24
24
}
25
25
)
26
26
```
27
27
28
-
If using SFCs, you will be registering the imported`.vue`files:
28
+
Si vous utilisez des SFC, vous enregistrerez les fichiers`.vue`importés :
29
29
30
30
```js
31
31
importMyComponentfrom'./App.vue'
32
32
33
33
app.component('MyComponent', MyComponent)
34
34
```
35
35
36
-
The `app.component()`method can be chained:
36
+
La méthode `app.component()`peut être chaînée :
37
37
38
38
```js
39
39
app
@@ -42,30 +42,30 @@ app
42
42
.component('ComponentC', ComponentC)
43
43
```
44
44
45
-
Globally registered components can be used in the template of any component within this application:
45
+
Les composants enregistrés globalement peuvent être utilisés dans le template de n'importe quel composant de cette application:
46
46
47
47
```vue-html
48
-
<!-- this will work in any component inside the app -->
48
+
<!-- cela fonctionnera dans n'importe quel composant de l'application -->
49
49
<ComponentA/>
50
50
<ComponentB/>
51
51
<ComponentC/>
52
52
```
53
53
54
-
This even applies to all subcomponents, meaning all three of these components will also be available _inside each other_.
54
+
Cela s'applique même à tous les sous-composants, ce qui signifie que ces trois composants seront également disponibles _dans chacun d'eux_.
55
55
56
-
## Local Registration
56
+
## Enregistrement local {#local-registration}
57
57
58
-
While convenient, global registration has a few drawbacks:
58
+
Bien que pratique, l'enregistrement global présente quelques inconvénients :
59
59
60
-
1.Global registration prevents build systems from removing unused components (a.k.a "tree-shaking"). If you globally register a component but end up not using it anywhere in your app, it will still be included in the final bundle.
60
+
1.L'enregistrement global empêche les systèmes de build de supprimer les composants inutilisés (alias "tree-shaking"). Si vous enregistrez globalement un composant mais que vous ne l'utilisez nulle part dans votre application, il sera toujours inclus dans le bundle final.
61
61
62
-
2.Global registration makes dependency relationships less explicit in large applications. It makes it difficult to locate a child component's implementation from a parent component using it. This can affect long-term maintainability similar to using too many global variables.
62
+
2.L'enregistrement global rend les relations entre dépendances moins explicites dans les applications de taille importante. Cela rend difficile la localisation de l'implémentation d'un composant enfant à partir d'un composant parent qui l'utilise. Cela peut affecter la maintenabilité à long terme, de la même manière que si vous utilisiez trop de variables globales.
63
63
64
-
Local registration scopes the availability of the registered components to the current component only. It makes the dependency relationship more explicit, and is more tree-shaking friendly.
64
+
L'enregistrement local limite la disponibilité des composants enregistrés au composant actuel uniquement. Cela rend la relation de dépendance plus explicite et est plus adaptée au tree-shaking.
65
65
66
66
<divclass="composition-api">
67
67
68
-
When using SFC with`<script setup>`, imported components can be locally used without registration:
68
+
Lors de l'utilisation de SFC avec`<script setup>`, les composants importés peuvent être utilisés localement sans enregistrement :
69
69
70
70
```vue
71
71
<script setup>
@@ -77,7 +77,7 @@ import ComponentA from './ComponentA.vue'
77
77
</template>
78
78
```
79
79
80
-
In non-`<script setup>`, you will need to use the `components`option:
80
+
Dans une configuration sans `<script setup>`, vous devrez utiliser l'option `components` :
81
81
82
82
```js
83
83
importComponentAfrom'./ComponentA.js'
@@ -95,7 +95,7 @@ export default {
95
95
</div>
96
96
<divclass="options-api">
97
97
98
-
Local registration is done using the `components`option:
98
+
L'enregistrement local se fait à l'aide de l'option `components` :
99
99
100
100
```vue
101
101
<script>
@@ -115,7 +115,7 @@ export default {
115
115
116
116
</div>
117
117
118
-
For each property in the`components` object, the key will be the registered name of the component, while the value will contain the implementation of the component. The above example is using the ES2015 property shorthand and is equivalent to:
118
+
Pour chaque propriété de l'objet`components`, la clé sera le nom enregistré du composant, tandis que la valeur contiendra l'implémentation du composant. L'exemple ci-dessus utilise le raccourci de propriété ES2015 et équivaut à :
119
119
120
120
```js
121
121
exportdefault {
@@ -126,16 +126,16 @@ export default {
126
126
}
127
127
```
128
128
129
-
Note that**locally registered components are _not_ also available in descendant components**. In this case, `ComponentA`will be made available to the current component only, not any of its child or descendant components.
129
+
Notez que**les composants enregistrés localement _ne_ sont _pas_ également disponibles dans les composants descendants**. Dans ce cas, `ComponentA`ne sera disponible que dans le composant actuel, et non pas dans tous autres de ses composants enfants ou descendants.
130
130
131
-
## Component Name Casing
131
+
## Casse des noms des composants {#component-name-casing}
132
132
133
-
Throughout the guide, we are using PascalCase names when registering components. This is because:
133
+
Tout au long de ce guide, nous utilisons des noms en casse Pascal (PascalCase) lors de l'enregistrement des composants. Ceci est dû au fait:
134
134
135
-
1.PascalCase names are valid JavaScript identifiers. This makes it easier to import and register components in JavaScript. It also helps IDEs with auto-completion.
135
+
1.Les noms en casse Pascal sont des identifiants JavaScript valides. Cela facilite l'import et l'enregistrement des composants en JavaScript. Il aide également les IDE avec l'auto-complétion.
136
136
137
-
2.`<PascalCase />`makes it more obvious that this is a Vue component instead of a native HTML element in templates. It also differentiates Vue components from custom elements (web components).
137
+
2.`<PascalCase />`rend plus évident qu'il s'agit d'un composant Vue au lieu d'un élément HTML natif dans les templates. Il différencie également les composants Vue des custom elements (web components).
138
138
139
-
This is the recommended style when working with SFC or string templates. However, as discussed in [DOM Template Parsing Caveats](/guide/essentials/component-basics.html#dom-template-parsing-caveats), PascalCase tags are not usable in DOM templates.
139
+
Il s'agit du style recommandé lorsque vous travaillez avec des templates à base de SFC ou de chaînes de caratères. Cependant, comme indiqué dans [les mises en garde concernant l'interprétation du template DOM](/guide/essentials/component-basics.html#dom-template-parsing-caveats), les balises déclarées en casse Pascal ne sont pas utilisables dans les templates DOM.
140
140
141
-
Luckily, Vue supports resolving kebab-case tags to components registered using PascalCase. This means a component registered as `MyComponent`can be referenced in the template via both `<MyComponent>`and`<my-component>`. This allows us to use the same JavaScript component registration code regardless of template source.
141
+
Heureusement, Vue prend en charge la résolution des balises au format kebab-case en leur équivalent composants enregistrés à la condition qu'ils utilisent la casse Pascal. Cela signifie qu'un composant enregistré en tant que `MyComponent`peut être référencé dans le template via à la fois `<MyComponent>`et`<my-component>`. Cela nous permet d'utiliser le même code d'enregistrement de composant JavaScript quelle que soit la source du template.
0 commit comments