@@ -1007,22 +1007,22 @@ Despite the existence of props and events, sometimes you might still need to dir
``` js
var parent = new Vue({ el: '#parent' })
-// access child component instance
+// accès au composant enfant
var child = parent.$refs.profile
```
-When `ref` is used together with `v-for`, the ref you get will be an array or an object containing the child components mirroring the data source.
+Quand `ref` est utilisé conjointement avec `v-for`, la référence que vous obtenez sera un tableau ou un objet contenant les composants enfants reflétant la source de donnée.
-
`$refs` are only populated after the component has been rendered, and it is not reactive. It is only meant as an escape hatch for direct child manipulation - you should avoid using `$refs` in templates or computed properties.
+
Les `$refs` sont seulement renseignés après le rendu du composant, et ne sont pas réactives. Elles sont seulement destinées à servir de porte dérobée pour la manipulation directe d'enfant (vous devriez éviter d'utiliser `$refs` dans vos templates et propriétés calculées).
-### Async Components
+### Composants asynchrones
-In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's actually needed. To make that easier, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. Vue will only trigger the factory function when the component actually needs to be rendered and will cache the result for future re-renders. For example:
+Dans de grosses applications, nous avons parfois besoin de diviser la structure en de plus petits fragments et uniquement charger le composant depuis le serveur quand c'est vraiment nécessaire. Pour rendre ça plus simple, Vue permet de définir votre composant comme une fabrique de fonctions qui résoudra de manière asynchrone la définition de votre composant. Vue déclenchera la fabrique de fonctions uniquement lorsque le rendu du composant est vraiment nécessaire sur le composant et mettra ce rendu en cache pour le resservir lors de futures demandes de rendu. Par exemple :
``` js
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
- // Pass the component definition to the resolve callback
+ // Passer la définition du composant à la fonction de retour `resolve`
resolve({
template: '
I am async!
'
})
@@ -1030,18 +1030,18 @@ Vue.component('async-example', function (resolve, reject) {
})
```
-The factory function receives a `resolve` callback, which should be called when you have retrieved your component definition from the server. You can also call `reject(reason)` to indicate the load has failed. The `setTimeout` here is simply for demonstration; How to retrieve the component is entirely up to you. One recommended approach is to use async components together with [Webpack's code-splitting feature](https://webpack.js.org/guides/code-splitting-require/):
+La fabrique de fonctions reçoit une fonction de retour `resolve` qui devra être appelée quand vous aurez récupéré la définition de votre composant depuis le serveur. Vous pouvez également appeler `reject(reason)` pour indiquer que le chargement a échoué. La fonction `setTimeout` est simplement là en tant qu'exemple ; la manière de récupérer le composant est entièrement à votre charge. Une approche recommandée est d'utiliser les composants asynchrones conjointement avec [la fonctionnalité de découpage de code de Webpack](https://webpack.js.org/guides/code-splitting-require/) :
``` js
Vue.component('async-webpack-example', function (resolve) {
- // This special require syntax will instruct Webpack to
- // automatically split your built code into bundles which
- // are loaded over Ajax requests.
+ // Cette syntaxe de `require` va indiquer à Webpack
+ // de découper automatiquement votre code après build dans
+ // des bundles qui seront chargés par des requêtes Ajax.
require(['./my-async-component'], resolve)
})
```
-You can also return a `Promise` in the factory function, so with Webpack 2 + ES2015 syntax you can do:
+Vous pouvez également retourner une `Promise` (promesse) dans la fabrique de fonctions ainsi avec Webpack 2 et la syntaxe ES2015 vous pouvez faire :
``` js
Vue.component(
@@ -1050,7 +1050,7 @@ Vue.component(
)
```
-When using [local registration](components.html#Local-Registration), you can also directly provide a function that returns a `Promise`:
+Quand vous utilisez une [inscription locale](components.html#Local-Registration), vous pouvez également fournir une fonction qui retourne une `Promise` :
``` js
new Vue({
@@ -1061,59 +1061,59 @@ new Vue({
})
```
-
If you're a Browserify user that would like to use async components, its creator has unfortunately [made it clear](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) that async loading "is not something that Browserify will ever support." Officially, at least. The Browserify community has found [some workarounds](https://github.com/vuejs/vuejs.org/issues/620), which may be helpful for existing and complex applications. For all other scenarios, we recommend simply using Webpack for built-in, first-class async support.
+
Si vous êtes un utilisateur de Browserify et que vous souhaitez utiliser ldes composants asynchrones, son créateur a malheureusement [été clair](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) sur le fait que le chargement asynchrone « n'est pas quelque chose que Browserify supportera un jour. ». Officiellement, du moins. La communauté Browserify a trouvé [plusieurs solutions de contournement](https://github.com/vuejs/vuejs.org/issues/620), qui peuvent être utiles pour des applications complexes déjà existantes. Pour tous les autres scénarios, nous vous recommandons simplement d'utiliser Webpack pour un support de première classe des composants asynchrones, intégré par défaut.
-### Component Naming Conventions
+### Conventions de nommage d'un composant
-When registering components (or props), you can use kebab-case, camelCase, or TitleCase. Vue doesn't care.
+Quand vous inscrivez un composant (ou des props), vous pouvez utiliser la kebab-case, camelCase, ou TitleCase. Vue n'en tient pas rigueur.
``` js
-// in a component definition
+// dans une définition de composant
components: {
- // register using kebab-case
+ // enregistrement utilisant la kebab-case
'kebab-cased-component': { /* ... */ },
- // register using camelCase
+ // enregistrement utilisant la camelCase
'camelCasedComponent': { /* ... */ },
- // register using TitleCase
+ // enregistrement utilisant la TitleCase
'TitleCasedComponent': { /* ... */ }
}
```
-Within HTML templates though, you have to use the kebab-case equivalents:
+À l'intérieur des templates HTML cependant, vous devez utiliser les équivalences kebab-case :
``` html
-
+
```
-When using _string_ templates however, we're not bound by HTML's case-insensitive restrictions. That means even in the template, you can reference your components and props using camelCase, TitleCase, or kebab-case:
+Quand vous utilisez des template basés sur les _chaînes de caractères_, vous n'avez pas les restrictions liées à la sensibilité à la casse du HTML. Cela signifie que même dans le template, vous pouvez référencer vos composants et props en utilisant les camelCase, TitleCase, ou kebab-case :
``` html
-
+
```
-If your component isn't passed content via `slot` elements, you can even make it self-closing with a `/` after the name:
+Si votre composant ne passe pas de contenu via des éléments `slot` vous pouvez même utiliser la syntaxe d'auto-fermeture `/` après le nom :
``` html
```
-Again, this _only_ works within string templates, as self-closing custom elements are not valid HTML and your browser's native parser will not understand them.
+Encore une fois, cela fonctionne _seulement_ dans les templates sous forme de chaîne de caractères. Les éléments auto-fermants ne sont pas du HTML valide et l'analyseur HTML natif de votre navigateur ne le comprendra pas.
-### Recursive Components
+### Composants récursifs
-Components can recursively invoke themselves in their own template. However, they can only do so with the `name` option:
+Les composants peuvent s'invoquer récursivement dans leur propre template. Cependant, ils peuvent uniquement le faire avec l'option `name` :
``` js
name: 'unique-name-of-my-component'
```
-When you register a component globally using `Vue.component`, the global ID is automatically set as the component's `name` option.
+Quand vous inscrivez un composant de manière globale en utilisant `Vue.component`, l'ID global est automatiquement défini en tant qu'option `name` du composant.
``` js
Vue.component('unique-name-of-my-component', {
@@ -1121,18 +1121,18 @@ Vue.component('unique-name-of-my-component', {
})
```
-If you're not careful, recursive components can also lead to infinite loops:
+Si vous n'êtes pas prudent, les composants récursifs peuvent conduire à des boucles infinies :
``` js
name: 'stack-overflow',
template: '
'
```
-A component like the above will result in a "max stack size exceeded" error, so make sure recursive invocation is conditional (i.e. uses a `v-if` that will eventually be `false`).
+Un composant comme celui ci-dessus conduira à une erreur « taille maximale de pile dépassée » ("max stack size exceeded"), donc assurez-vous que les invocations récursives soient conditionnelles (c-à-d utilisent un `v-if` qui vaudra éventuellement `false`).
-### Circular References Between Components
+### Références circulaires entre les composants
-Let's say you're building a file directory tree, like in Finder or File Explorer. You might have a `tree-folder` component with this template:
+Imaginons que vous construisiez une arborescence de fichiers, comme Finder ou File Explorer. Vous pouvez avoir un composant `tree-folder` avec ce template :
``` html
@@ -1141,7 +1141,7 @@ Let's say you're building a file directory tree, like in Finder or File Explorer
```
-Then a `tree-folder-contents` component with this template:
+Puis un composant `tree-folder-contents` avec ce template :
``` html
@@ -1152,17 +1152,17 @@ Then a `tree-folder-contents` component with this template:
```
-When you look closely, you'll see that these components will actually be each other's descendent _and_ ancestor in the render tree - a paradox! When registering components globally with `Vue.component`, this paradox is resolved for you automatically. If that's you, you can stop reading here.
+En regardant attentivement, vous verrez que ces composants seront en fait l'ancêtre _et_ le descendant l'un de l'autre dans l'arbre de rendu — un paradoxe ! Quand vous inscrivez un composant de manière globale avec `Vue.component`, ce paradoxe est résolu pour vous automatiquement. Si c'est votre cas, vous pouvez arrêter de lire ici.
-However, if you're requiring/importing components using a __module system__, e.g. via Webpack or Browserify, you'll get an error:
+Cependant, si vous réclamez/importez des composants en utilisant un __système de module__, c-à-d via Webpack ou Browserify, vous obtiendrez une erreur « Échec de montage du composant : un template ou une fonction de rendu n'est pas défini. » :
```
-Failed to mount component: template or render function not defined.
+Failed to mount component: template or render function not defined
```
-To explain what's happening, I'll call our components A and B. The module system sees that it needs A, but first A needs B, but B needs A, but A needs B, etc, etc. It's stuck in a loop, not knowing how to fully resolve either component without first resolving the other. To fix this, we need to give the module system a point at which it can say, "A needs B _eventually_, but there's no need to resolve B first."
+Pour expliquer ce qui arrive, je vais appeler nos composants A et B. Le système de module voit de quoi A a besoin, d'abord A a besoin de B, mais B à besoin de A, mais A a besoin de B, etc, etc. Ça tourne en boucle, ne sachant pas comment complètement résoudre l'un ou l'autre des composants sans en résoudre un avant l'autre. Pour régler ça, nous avons besoin de donner au système de module un moyen de dire, « A a _éventuellement_ besoin de B, mais il n'y a pas de raison de résoudre B en premier. ».
-In our case, I'll make that point the `tree-folder` component. We know the child that creates the paradox is the `tree-folder-contents` component, so we'll wait until the `beforeCreate` lifecycle hook to register it:
+Dans notre cas, je ferais cela avec le composant `tree-folder`. Nous savons que l'enfant crée un paradoxe dans le composant `tree-folder-contents`, nous allons donc attendre le *hook* `beforeCreate` du cycle de vie pour l'inscrire :
``` js
beforeCreate: function () {
@@ -1170,30 +1170,30 @@ beforeCreate: function () {
}
```
-Problem solved!
+Problème résolu !
-### Inline Templates
+### Templates avec `inline-template`
-When the `inline-template` special attribute is present on a child component, the component will use its inner content as its template, rather than treating it as distributed content. This allows more flexible template-authoring.
+Quand l'attribut spécifique `inline-template` est présent sur le composant enfant, il va utiliser son contenu interne en tant que template, plutôt que de le traiter comme un contenu distribué. Cela permet une création de template plus flexible.
``` html
-
These are compiled as the component's own template.
-
Not parent's transclusion content.
+
Ceci est traité comme le template du composant lui-même.
+
Il n'y aura pas de transclusion de contenu.
```
-However, `inline-template` makes the scope of your templates harder to reason about. As a best practice, prefer defining templates inside the component using the `template` option or in a `template` element in a `.vue` file.
+Cependant, la propriété `inline-template` rend la portée de votre template difficile à appréhender. Pour une bonne pratique, optez plutôt pour définir vos templates à l'intérieur du composant en utilisant l'option `template` ou un élément `template` dans un fichier `.vue`.
### X-Templates
-Another way to define templates is inside of a script element with the type `text/x-template`, then referencing the template by an id. For example:
+Un autre moyen de définir des templates est de le faire à l'intérieur d'un élément `script` avec le type `text/x-template`, quand vous référencez le template par son id. Par exemple :
``` html
```
@@ -1203,19 +1203,19 @@ Vue.component('hello-world', {
})
```
-These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.
+Cela peut être pratique pour des démos avec de gros templates ou dans des applications extrêmement petites, mais cela devrait être évité dans tous les autres cas, car cela sépare les templates du reste de la définition du composant.
-### Cheap Static Components with `v-once`
+### Composants statiques peu coûteux avec `v-once`
-Rendering plain HTML elements is very fast in Vue, but sometimes you might have a component that contains **a lot** of static content. In these cases, you can ensure that it's only evaluated once and then cached by adding the `v-once` directive to the root element, like this:
+Faire le rendu d'éléments HTML est vraiment rapide avec Vue, mais parfois vous pouvez avoir un composant qui contient **beaucoup** de contenu statique. Dans ces cas, vous pouvez vous assurer qu'il n'est évalué qu'une seule fois puis mis en cache avec la directive `v-once` sur l'élément racine, comme cela :
``` js
Vue.component('terms-of-service', {
- template: '\
-
\
-
Terms of Service
\
- ... a lot of static content ...\
- \
- '
+ template: `
+
+
Conditions d'utilisation
+ ... beaucoup de contenu statique ...
+
+ `
})
```