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
# Registrare un componente {#component-registration}
2
2
3
-
> This page assumes you've already read the [Components Basics](/guide/essentials/component-basics). Read that first if you are new to components.
3
+
> Si assume che tu abbia già letto le [Basi dei componenti](/guide/essentials/component-basics). Leggi prima quello se sei nuovo al concetto di componente.
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 componente Vue deve essere "registrato" affinché Vue sappia dove trovare la sua implementazione quando viene incontrato in un template. Ci sono due modi per registrare i componenti: globale e locale.
8
8
9
-
## Global Registration {#global-registration}
9
+
## Registrazione Globale {#registrazione-globale}
10
10
11
-
We can make components available globally in the current [Vue application](/guide/essentials/application) using the `app.component()` method:
11
+
Possiamo rendere i componenti disponibili globalmente nell'attuale applicazione Vue utilizzando il metodo 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
+
//il nome registrato
20
20
'MyComponent',
21
-
//the implementation
21
+
//l'implementazione
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
+
Se si utilizzano i file SFC, si registreranno i file `.vue`importati:
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
+
Il metodo `app.component()`può essere concatenato:
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
+
I componenti registrati globalmente possono essere utilizzati nel template di qualsiasi componente all'interno di questa applicazione:
46
46
47
47
```vue-html
48
-
<!-- this will work in any component inside the app -->
48
+
<!-- questo funzionerà con qualsiasi componente registrato -->
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
+
Questo si applica anche a tutti i sotto-componenti, il che significa che tutti e tre questi componenti saranno disponibili _all'interno l'uno dell'altro_.
55
55
56
-
## Local Registration {#local-registration}
56
+
## Registrazione locale {#local-registration}
57
57
58
-
While convenient, global registration has a few drawbacks:
58
+
Sebbene sia conveniente, la registrazione globale ha alcuni svantaggi:
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.La registrazione globale impedisce ai compilatori di eliminare componenti non utilizzati. Se registri un componente a livello globale ma poi non lo utilizzi in nessuna parte della tua applicazione, esso verrà comunque incluso nel bundle finale.
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.La registrazione globale rende le relazioni di dipendenza meno esplicite nelle applicazioni di grandi dimensioni. Diventa difficile individuare l'implementazione di un componente figlio a partire da un componente genitore che lo utilizza. Questo può influire sulla manutenibilità a lungo termine, simile all'utilizzo eccessivo di variabili globali.
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
+
La registrazione locale delimita la disponibilità dei componenti registrati solo al componente corrente. Ciò rende la relazione di dipendenza più esplicita ed è più amichevole per il 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
+
Quando si utilizzano i SFC con`<script setup>`, i componenti importati possono essere utilizzati localmente senza registrazione:
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
+
Senza lo `<script setup>`, dovresti usare la sezione `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
+
La registrazione locale viene effettuata nella sezione `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
+
Per ogni proprietà nell'oggetto `components`, la chiave sarà il nome registrato del componente, mentre il valore conterrà l'implementazione del componente. L'esempio sopra sta utilizzando la scorciatoia della proprietà ES2015 ed è equivalente a:
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
+
Nota che**i componenti registrati localmente _non sono disponibili_ anche nei componenti discendenti**. In questo caso, `ComponentA`sarà disponibile solo per il componente corrente, non per nessuno dei suoi componenti figli o discendenti.
130
130
131
-
## Component Name Casing {#component-name-casing}
131
+
## Maiuscole e minuscole nel nome del componente {#component-name-casing}
132
132
133
-
Throughout the guide, we are using PascalCase names when registering components. This is because:
133
+
In tutta la guida, stiamo utilizzando nomi in PascalCase durante la registrazione dei componenti. Ciò è dovuto al seguente motivo:
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.I nomi in PascalCase sono identificatori JavaScript validi. Ciò semplifica l'importazione e la registrazione dei componenti in JavaScript. Inoltre, aiuta gli IDE con la funzionalità di auto-completamento.
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.L'utilizzo di `<PascalCase />`rende più evidente che si tratta di un componente Vue e non di un elemento HTML nativo nei template. Inoltre, differenzia i componenti Vue dagli elementi personalizzati (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#dom-template-parsing-caveats), PascalCase tags are not usable in DOM templates.
139
+
Questo è lo stile raccomandato quando si lavora con SFC o stringhe di template. Tuttavia, come discusso in [DOM Template Parsing Caveats](/guide/essentials/component-basics#dom-template-parsing-caveats), i tag PascalCase non sono utilizzabili nei DOM templates.
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
+
Fortunatamente, Vue supporta la risoluzione dei tag in kebab-case per i componenti registrati utilizzando PascalCase. Ciò significa che un componente registrato come `MyComponent`può essere referenziato nel template sia tramite`<MyComponent>`che`<my-component>`. Ciò ci consente di utilizzare lo stesso codice di registrazione del componente JavaScript indipendentemente dalla fonte del template.
0 commit comments