From 69a6f00a7748e95e8ee45d91f2e5cb57b27b5bd1 Mon Sep 17 00:00:00 2001 From: Haeresis Date: Sat, 25 Aug 2018 17:20:37 +0200 Subject: [PATCH 1/3] Traduction de components-props.md Signed-off-by: Haeresis --- src/v2/guide/components-props.md | 170 +++++++++++++++---------------- 1 file changed, 85 insertions(+), 85 deletions(-) diff --git a/src/v2/guide/components-props.md b/src/v2/guide/components-props.md index dcc5579998..5158e232e9 100644 --- a/src/v2/guide/components-props.md +++ b/src/v2/guide/components-props.md @@ -1,39 +1,39 @@ --- -title: Props (EN) +title: Props type: guide order: 102 --- -> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components. +> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez [cette partie](components.html) en premier si les composants sont quelque chose de nouveau pour vous. -## Prop Casing (camelCase vs kebab-case) +## Casse des props (camelCase vs. kebab-case) -

Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur le dépôt GitHub dédié de Vuejs-FR.

HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you're using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents:

+Les noms d'attributs HTML sont insensibles à la casse, aussi les navigateurs interpréterons de la même manière les majuscules et les minuscules. Cela signifie que l'utilisation des templates directement dans le DOM, les props en camelCase doivent utiliser leur équivalent kebab-case (délimités par des tirets) : ``` js Vue.component('blog-post', { - // camelCase in JavaScript + // camelCase en JavaScript props: ['postTitle'], template: '

{{ postTitle }}

' }) ``` ``` html - - + + ``` -Again, if you're using string templates, this limitation does not apply. +Cependant, si vous utilisez les templates de chaine de caractères directement dans le JavaScript, il n'y a pas cette limitation. -## Prop Types +## Types des props -So far, we've only seen props listed as an array of strings: +Pour l'instant, nous n'avons vu que les props listés dans des tableaux de chaines de caractères : ```js props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] ``` -Usually though, you'll want every prop to be a specific type of value. In these cases, you can list props as an object, where the properties' names and values contain the prop names and types, respectively: +Plus fréquemment, vous souhaiterez que chaque prop possède un type de valeur spécifique. Dans ce cas, vous pouvez lister vos propriétés comme un objet, où les nom et les valeurs de propriétés sont respectivement les noms et types de prop : ```js props: { @@ -45,93 +45,93 @@ props: { } ``` -This not only documents your component, but will also warn users in the browser's JavaScript console if they pass the wrong type. You'll learn much more about [type checks and other prop validations](#Prop-Validation) further down this page. +Cela ne documente pas seulement votre composant mais va également permettre à l'utilisateur d'être averti par la console JavaScript du navigateur s'il passe le mauvais type. Vous pourrez en apprendre plus à propos des [validateurs de types](#Validation-des-props) plus bas dans cette page. -## Passing Static or Dynamic Props +## Passage de props statiques ou dynamiques -So far, you've seen props passed a static value, like in: +Plus tôt, vous avez vu comment passer des props de manière statique comme ceci : ```html - + ``` -You've also seen props assigned dynamically with `v-bind`, such as in: +vous avez également vu qu'il était possible d'assigner des props dynamiquement avec `v-bind` comme ceci : ```html - + - - + + ``` -In the two examples above, we happen to pass string values, but _any_ type of value can actually be passed to a prop. +Dans les deux exemples précédent, nous passons en fait une valeur sous forme de chaine de caractère mais _tous_ les types de valeur peuvent en fait être passées à la prop. -### Passing a Number +### Passer un Number ```html - - + + - + ``` -### Passing a Boolean +### Passer un Boolean ```html - + - - + + - + ``` -### Passing an Array +### Passer un Array ```html - - + + - + ``` -### Passing an Object +### Passer un Object ```html - - + + - + ``` -### Passing the Properties of an Object +### Passage des propriétés d'un objet -If you want to pass all the properties of an object as props, you can use `v-bind` without an argument (`v-bind` instead of `v-bind:prop-name`). For example, given a `post` object: +Si vous souhaitez passer toutes les propriétés d'un objet en tant que props, vous devez utiliser `v-bind` sans argument (`v-bind` au lieu de `v-bind:prop-name`). Par exemple, avec un objet `post` : ``` js post: { id: 1, - title: 'My Journey with Vue' + title: 'Mon initiation avec Vue' } ``` -The following template: +Le template suivant : ``` html ``` -Will be equivalent to: +Sera équivaleunt à : ``` html ``` -## One-Way Data Flow +## Flux de données unidirectionnel -All props form a **one-way-down binding** between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent's state, which can make your app's data flow harder to understand. +Toutes les données forme **un flux de donnée descendant unidirectionnel (« one-way-down binding »)** entre la propriété enfaint et la propriété parente : quand la propriété du parent est mise à jour, cela va mettre à jour celle de l'enfant mais rien d'autre. Cela empèche un composant enfant de muter accidentellement l'état du parent, rendant le flux de données de votre application difficile à comprendre. -In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should **not** attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console. +En complément, chaque fois que le composant parent est mis à jour, toutes les props du composant enfant vont être mis à jour avec les dernières valeur à jour. Cela signifie que vous ne devriez **pas** essayer du muter une prop depuis l'intérieur d'un composant. Si vous le faite, Vue lancera un avertissement dans la console. -There are usually two cases where it's tempting to mutate a prop: +Il y a couramment deux cas où vous seriez tenter de muter une prop : -1. **The prop is used to pass in an initial value; the child component wants to use it as a local data property afterwards.** In this case, it's best to define a local data property that uses the prop as its initial value: +1. **La prop est seulement utiliser pour passer une valeur initiale ; le composant enfant doit seulement l'utiliser commo donnée de propriété local seulement.** Dans ce cas, le mieux est de définir une propriété locale qui utilise la prop comme valeur initiale : ``` js props: ['initialCounter'], @@ -159,7 +159,7 @@ There are usually two cases where it's tempting to mutate a prop: } ``` -2. **The prop is passed in as a raw value that needs to be transformed.** In this case, it's best to define a computed property using the prop's value: +2. **La prop est passée dans un format qui demande à être transformé.** Dans ce cas, le mieux est de définir une propriété calculée utilisant la valeur de la prop : ``` js props: ['size'], @@ -170,44 +170,44 @@ There are usually two cases where it's tempting to mutate a prop: } ``` -

Note that objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child component **will** affect parent state.

+

Notez que les objets et les tableaux en JavaScript sont passés par référence, ce qui signifie que si la prop est un objet ou un tableau, muter l'objet ou le tableu lui-même dans l'enfant **va** affecter l'état du parent.

-## Prop Validation +## Validation des props -Components can specify requirements for its props, such as the types you've already seen. If a requirement isn't met, Vue will warn you in the browser's JavaScript console. This is especially useful when developing a component that's intended to be used by others. +Les composants peuvent spécifier des conditions requises pour leurs props, comme les types que nous avons déjà vu. Si les conditions requises ne sont pas validés, Vue va vous en avertir dans la console JavaScript du navigateur. Cela est particulièrement utile quand on développe un composant destiné à être utilisé par les autres. -To specify prop validations, you can provide an object with validation requirements to the value of `props`, instead of an array of strings. For example: +Pour spécifier des validations de prop, vous pouvez fournir un objet avec les conditions de validation pour les valeurs des `props` plutôt qu'un tableau de chaine de caractère. Par exemple : ``` js Vue.component('my-component', { props: { - // Basic type check (`null` matches any type) + // Vérification de type basique (`null` valide n'importe quel type) propA: Number, - // Multiple possible types + // Multiple types possibles propB: [String, Number], - // Required string + // Chaine de caractères nécéssaire propC: { type: String, required: true }, - // Number with a default value + // Nombre avec une valeur par défaut propD: { type: Number, default: 100 }, - // Object with a default value + // Objet avec une valeur par défaut propE: { type: Object, - // Object or array defaults must be returned from - // a factory function + // Les objets et tableaus par défaut doivent être retournés depuis + // une fonction de fabrique default: function () { return { message: 'hello' } } }, - // Custom validator function + // Fonction de validation personnalisée propF: { validator: function (value) { - // The value must match one of these strings + // La valeur passée doit être l'une de ces chaines de caractères return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } @@ -215,13 +215,13 @@ Vue.component('my-component', { }) ``` -When prop validation fails, Vue will produce a console warning (if using the development build). +Quand la validation de prop échoue, Vue va lancé un avertissement dans la console (si vous utilisez le Build de développement) -

Note that props are validated **before** a component instance is created, so instance properties (e.g. `data`, `computed`, etc) will not be available inside `default` or `validator` functions.

+

Notez que les props sont validées **avant** que l'instance du composant soit crée, donc les propriétés d'instances (par ex. `data`, `computed`, etc) ne seront pas disponible dans les fonctions `default` ou `validator`.

-### Type Checks +### Vérification de types -The `type` can be one of the following native constructors: +Le `type` peut être l'un des constructeurs natif suivant : - String - Number @@ -232,7 +232,7 @@ The `type` can be one of the following native constructors: - Function - Symbol -In addition, `type` can also be a custom constructor function and the assertion will be made with an `instanceof` check. For example, given the following constructor function exists: +En plus, `type` peut aussi être une fonction constructeur personnalisée et l'assertion pourra être testé avec `instanceof`. Par exemple, avec la fonction constructeur existante suivante : ```js function Person (firstName, lastName) { @@ -241,7 +241,7 @@ function Person (firstName, lastName) { } ``` -You could use: +Vous pourrez utiliser : ```js Vue.component('blog-post', { @@ -251,31 +251,31 @@ Vue.component('blog-post', { }) ``` -to validate that the value of the `author` prop was created with `new Person`. +pour valider que la valeur de la prop `author` est bien créée avec un `new Person`. -## Non-Prop Attributes +## Attributs non prop -A non-prop attribute is an attribute that is passed to a component, but does not have a corresponding prop defined. +Un attribut non prop est un attribut passé à un composant mais qui n'a pas de prop correspondante de définie. -While explicitly defined props are preferred for passing information to a child component, authors of component libraries can't always foresee the contexts in which their components might be used. That's why components can accept arbitrary attributes, which are added to the component's root element. +Bien que définir explicitement les props soit préféré pour passer des informations à un composant enfant, les auteurs de bibliothèque ne peuvent pas deviner dans quel contexte leur composant va être utilisé. C'est pourquoi il est possible qu'un composant puisse accepter des attributs arbitraires qui seront ajoutés sur l'élément racine du composant. -For example, imagine we're using a 3rd-party `bootstrap-date-input` component with a Bootstrap plugin that requires a `data-date-picker` attribute on the `input`. We can add this attribute to our component instance: +Par exemple, imaginez que vous utilisiez un composant tiers `bootstrap-date-input` avec un plugin Bootstrap qui nécessite un `data-date-picker` attribut sul l'`input`. Nous pouvons ajouter cet attribut à notre instance de composant : ``` html ``` -And the `data-date-picker="activated"` attribute will automatically be added to the root element of `bootstrap-date-input`. +et l'attribut `data-date-picker="activated"` sera automatiquement ajouter sur l'élément racine de `bootstrap-date-input`. -### Replacing/Merging with Existing Attributes +### Remplacement ou fusion avec des attributs existants -Imagine this is the template for `bootstrap-date-input`: +Imaginez que ceci est le template pour `bootstrap-date-input` : ``` html ``` -To specify a theme for our date picker plugin, we might need to add a specific class, like this: +Pour spécifier un thème pour notre plugin date picker, nous allons avoir besoin d'ajouter une classe comme ceci : ``` html ``` -In this case, two different values for `class` are defined: +Dans ce cas, deux valeurs différentes de `class` sont définies : -- `form-control`, which is set by the component in its template -- `date-picker-theme-dark`, which is passed to the component by its parent +- `form-control`, qui va être appliqué dans le template du composant, +- `date-picker-theme-dark`, qui va être passé au composant depuis son parent. -For most attributes, the value provided to the component will replace the value set by the component. So for example, passing `type="text"` will replace `type="date"` and probably break it! Fortunately, the `class` and `style` attributes are a little smarter, so both values are merged, making the final value: `form-control date-picker-theme-dark`. +Pour la plupard des attributs, la valeur fournie par le composant va remplacer la valeur définie par le composant. Aussi par exemple, passer `type="text"` va remplacer `type="date"` et probablement tout casser ! Heureusement, les attributs `class` et `style` sont plus malins, ces deux valeurs sont fusionné, fournissant la valeur finale `form-control date-picker-theme-dark`. -### Disabling Attribute Inheritance +### Désactiver l'héritage d'attribut -If you do **not** want the root element of a component to inherit attributes, you can set `inheritAttrs: false` in the component's options. For example: +Si vous **ne** voulez **pas** que l'élément racine d'un composant hérite de tels attributs, vous pouvez mettre `inheritAttrs: false` dans les options de votre composant. Par exemple : ```js Vue.component('my-component', { @@ -302,7 +302,7 @@ Vue.component('my-component', { }) ``` -This can be especially useful in combination with the `$attrs` instance property, which contains the attribute names and values passed to a component, such as: +Cela est particulièrement utile avec l'utilisation combiné de la propriété d'instance `$attrs` qui contient les noms et valeurs passés à un composant comme ceci : ```js { @@ -311,7 +311,7 @@ This can be especially useful in combination with the `$attrs` instance property } ``` -With `inheritAttrs: false` and `$attrs`, you can manually decide which element you want to forward attributes to, which is often desirable for [base components](../style-guide/#Base-component-names-strongly-recommended): +Avec `inheritAttrs: false` et `$attrs`, vous pouvez manuellement décider sur quel élément vous souhaitez déposerles attributs passés, ce qui est souvent souhaité dans le cas des [composants de base](#Base-de-nom-de-composant-fortement-recommande) : ```js Vue.component('base-input', { @@ -330,7 +330,7 @@ Vue.component('base-input', { }) ``` -This pattern allows you to use base components more like raw HTML elements, without having to care about which element is actually at its root: +Ce modèle vous permet d'utiliser des composants de base comme des éléments HTML standard sans avoir à vous soucier de quel élément est actuellement à sa racine : ```html Date: Sat, 25 Aug 2018 17:39:05 +0200 Subject: [PATCH 2/3] Relecture rapide Signed-off-by: Haeresis --- src/v2/guide/components-props.md | 48 ++++++++++++++++---------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/v2/guide/components-props.md b/src/v2/guide/components-props.md index 5158e232e9..9f162e42f4 100644 --- a/src/v2/guide/components-props.md +++ b/src/v2/guide/components-props.md @@ -8,7 +8,7 @@ order: 102 ## Casse des props (camelCase vs. kebab-case) -Les noms d'attributs HTML sont insensibles à la casse, aussi les navigateurs interpréterons de la même manière les majuscules et les minuscules. Cela signifie que l'utilisation des templates directement dans le DOM, les props en camelCase doivent utiliser leur équivalent kebab-case (délimités par des tirets) : +Les noms d'attributs HTML sont insensibles à la casse, aussi les navigateurs interpréteront de la même manière les majuscules et les minuscules. Cela signifie que pour l'utilisation des templates directement dans le DOM les props en camelCase doivent utiliser leur équivalent kebab-case (délimités par des tirets) : ``` js Vue.component('blog-post', { @@ -27,13 +27,13 @@ Cependant, si vous utilisez les templates de chaine de caractères directement d ## Types des props -Pour l'instant, nous n'avons vu que les props listés dans des tableaux de chaines de caractères : +Pour l'instant, nous n'avons vu que les props listées dans des tableaux de chaines de caractères : ```js props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] ``` -Plus fréquemment, vous souhaiterez que chaque prop possède un type de valeur spécifique. Dans ce cas, vous pouvez lister vos propriétés comme un objet, où les nom et les valeurs de propriétés sont respectivement les noms et types de prop : +Plus fréquemment, vous souhaiterez que chaque prop possède un type de valeur spécifique. Dans ce cas, vous pouvez lister vos propriétés comme un objet, où les noms et les valeurs de propriétés sont respectivement les noms et types de props : ```js props: { @@ -55,7 +55,7 @@ Plus tôt, vous avez vu comment passer des props de manière statique comme ceci ``` -vous avez également vu qu'il était possible d'assigner des props dynamiquement avec `v-bind` comme ceci : +vous avez également vu qu'il était possible d'affecter des props dynamiquement avec `v-bind` comme ceci : ```html @@ -65,7 +65,7 @@ vous avez également vu qu'il était possible d'assigner des props dynamiquement ``` -Dans les deux exemples précédent, nous passons en fait une valeur sous forme de chaine de caractère mais _tous_ les types de valeur peuvent en fait être passées à la prop. +Dans les deux exemples précédents, nous passons en fait une valeur sous forme de chaine de caractère mais _tous_ les types de valeur peuvent en fait être passées à la prop. ### Passer un Number @@ -116,7 +116,7 @@ Dans les deux exemples précédent, nous passons en fait une valeur sous forme d ### Passage des propriétés d'un objet -Si vous souhaitez passer toutes les propriétés d'un objet en tant que props, vous devez utiliser `v-bind` sans argument (`v-bind` au lieu de `v-bind:prop-name`). Par exemple, avec un objet `post` : +Si vous souhaitez passer toutes les propriétés d'un objet en tant que props, vous devez utiliser `v-bind` sans l'argument (`v-bind` au lieu de `v-bind:prop-name`). Par exemple, avec un objet `post` : ``` js post: { @@ -125,13 +125,13 @@ post: { } ``` -Le template suivant : +le template suivant : ``` html ``` -Sera équivaleunt à : +sera équivalent à : ``` html Notez que les props sont validées **avant** que l'instance du composant soit crée, donc les propriétés d'instances (par ex. `data`, `computed`, etc) ne seront pas disponible dans les fonctions `default` ou `validator`.

+

Notez que les props sont validées **avant** que l'instance du composant soit créée. Donc les propriétés d'instances (par ex. `data`, `computed`, etc) ne seront pas disponibles dans les fonctions `default` ou `validator`.

### Vérification de types -Le `type` peut être l'un des constructeurs natif suivant : +Le `type` peut être l'un des constructeurs natifs suivants : - String - Number @@ -232,7 +232,7 @@ Le `type` peut être l'un des constructeurs natif suivant : - Function - Symbol -En plus, `type` peut aussi être une fonction constructeur personnalisée et l'assertion pourra être testé avec `instanceof`. Par exemple, avec la fonction constructeur existante suivante : +En plus, `type` peut aussi être une fonction constructeur personnalisée et l'assertion pourra être testée avec `instanceof`. Par exemple, avec la fonction constructeur existante suivante : ```js function Person (firstName, lastName) { @@ -253,11 +253,11 @@ Vue.component('blog-post', { pour valider que la valeur de la prop `author` est bien créée avec un `new Person`. -## Attributs non prop +## Attributs non props Un attribut non prop est un attribut passé à un composant mais qui n'a pas de prop correspondante de définie. -Bien que définir explicitement les props soit préféré pour passer des informations à un composant enfant, les auteurs de bibliothèque ne peuvent pas deviner dans quel contexte leur composant va être utilisé. C'est pourquoi il est possible qu'un composant puisse accepter des attributs arbitraires qui seront ajoutés sur l'élément racine du composant. +Bien que définir explicitement les props soit préféré pour passer des informations à un composant enfant, les auteurs de bibliothèques ne peuvent pas deviner dans quel contexte leur composant va être utilisé. C'est pourquoi il est possible qu'un composant puisse accepter des attributs arbitraires qui seront ajoutés sur l'élément racine du composant. Par exemple, imaginez que vous utilisiez un composant tiers `bootstrap-date-input` avec un plugin Bootstrap qui nécessite un `data-date-picker` attribut sul l'`input`. Nous pouvons ajouter cet attribut à notre instance de composant : @@ -265,7 +265,7 @@ Par exemple, imaginez que vous utilisiez un composant tiers `bootstrap-date-inpu ``` -et l'attribut `data-date-picker="activated"` sera automatiquement ajouter sur l'élément racine de `bootstrap-date-input`. +et l'attribut `data-date-picker="activated"` sera automatiquement ajouté sur l'élément racine de `bootstrap-date-input`. ### Remplacement ou fusion avec des attributs existants @@ -289,7 +289,7 @@ Dans ce cas, deux valeurs différentes de `class` sont définies : - `form-control`, qui va être appliqué dans le template du composant, - `date-picker-theme-dark`, qui va être passé au composant depuis son parent. -Pour la plupard des attributs, la valeur fournie par le composant va remplacer la valeur définie par le composant. Aussi par exemple, passer `type="text"` va remplacer `type="date"` et probablement tout casser ! Heureusement, les attributs `class` et `style` sont plus malins, ces deux valeurs sont fusionné, fournissant la valeur finale `form-control date-picker-theme-dark`. +Pour la plupard des attributs, la valeur fournie par le composant va remplacé la valeur définie par le composant. Aussi par exemple, passer `type="text"` va remplacer `type="date"` et probablement tout casser ! Heureusement, les attributs `class` et `style` sont plus malins. Ces deux valeurs sont fusionnées, fournissant la valeur finale `form-control date-picker-theme-dark`. ### Désactiver l'héritage d'attribut @@ -302,7 +302,7 @@ Vue.component('my-component', { }) ``` -Cela est particulièrement utile avec l'utilisation combiné de la propriété d'instance `$attrs` qui contient les noms et valeurs passés à un composant comme ceci : +Cela est particulièrement utile avec l'utilisation combinée de la propriété d'instance `$attrs` qui contient les noms et valeurs passées à un composant comme ceci : ```js { @@ -311,7 +311,7 @@ Cela est particulièrement utile avec l'utilisation combiné de la propriété d } ``` -Avec `inheritAttrs: false` et `$attrs`, vous pouvez manuellement décider sur quel élément vous souhaitez déposerles attributs passés, ce qui est souvent souhaité dans le cas des [composants de base](#Base-de-nom-de-composant-fortement-recommande) : +Avec `inheritAttrs: false` et `$attrs`, vous pouvez manuellement décider sur quel élément vous souhaitez déposer les attributs passés, ce qui est souvent souhaité dans le cas des [bases de composant](#Base-de-nom-de-composant-fortement-recommande) : ```js Vue.component('base-input', { From 3e1dc67d28a0c05add6a8efab94ee75f8177544e Mon Sep 17 00:00:00 2001 From: Haeresis Date: Thu, 30 Aug 2018 11:31:42 +0200 Subject: [PATCH 3/3] Revue de @Kocal et @rspt Signed-off-by: Haeresis --- src/v2/guide/components-custom-events.md | 4 ++-- src/v2/guide/components-dynamic-async.md | 2 +- src/v2/guide/components-edge-cases.md | 2 +- src/v2/guide/components-props.md | 26 ++++++++++++------------ src/v2/guide/components-registration.md | 4 ++-- 5 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/v2/guide/components-custom-events.md b/src/v2/guide/components-custom-events.md index a80ad15e48..980f7f2515 100644 --- a/src/v2/guide/components-custom-events.md +++ b/src/v2/guide/components-custom-events.md @@ -1,10 +1,10 @@ --- -title: Événements personnalisés +title: Évènements personnalisés type: guide order: 103 --- -> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez [cette partie](components.html) en premier si les composants sont quelque chose de nouveau pour vous. +> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez-les en premier si les composants sont quelque chose de nouveau pour vous. ## Noms d'événements diff --git a/src/v2/guide/components-dynamic-async.md b/src/v2/guide/components-dynamic-async.md index ec6e77a065..382bff3615 100644 --- a/src/v2/guide/components-dynamic-async.md +++ b/src/v2/guide/components-dynamic-async.md @@ -4,7 +4,7 @@ type: guide order: 105 --- -> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez [cette partie](components.html) en premier si les composants sont quelque chose de nouveau pour vous. +> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez-les en premier si les composants sont quelque chose de nouveau pour vous. ## `keep-alive` avec les composants dynamiques diff --git a/src/v2/guide/components-edge-cases.md b/src/v2/guide/components-edge-cases.md index 05e6fb891d..98347971a8 100644 --- a/src/v2/guide/components-edge-cases.md +++ b/src/v2/guide/components-edge-cases.md @@ -4,7 +4,7 @@ type: guide order: 106 --- -> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez [cette partie](components.html) en premier si les composants sont quelque chose de nouveau pour vous. +> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez-les en premier si les composants sont quelque chose de nouveau pour vous.

Toutes les fonctionnalités sur cette page documentent la gestion de cas limites, c'est-à-dire des situations peu ordinaires qui requièrent parfois de contourner légèrement les règles de Vue. Notez cependant qu'elles ont toutes des inconvénients ou des situations où elles peuvent s'avérer dangereuses. Celles-si sont décrites dans chaque cas, donc gardez-les en tête quand vous décidez d'utiliser chaque fonctionnalité.

diff --git a/src/v2/guide/components-props.md b/src/v2/guide/components-props.md index 9f162e42f4..f5c7cc5172 100644 --- a/src/v2/guide/components-props.md +++ b/src/v2/guide/components-props.md @@ -4,11 +4,11 @@ type: guide order: 102 --- -> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez [cette partie](components.html) en premier si les composants sont quelque chose de nouveau pour vous. +> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez-les en premier si les composants sont quelque chose de nouveau pour vous. ## Casse des props (camelCase vs. kebab-case) -Les noms d'attributs HTML sont insensibles à la casse, aussi les navigateurs interpréteront de la même manière les majuscules et les minuscules. Cela signifie que pour l'utilisation des templates directement dans le DOM les props en camelCase doivent utiliser leur équivalent kebab-case (délimités par des tirets) : +Les noms d'attributs HTML sont insensibles à la casse, aussi les navigateurs interprèteront de la même manière les majuscules et les minuscules. Cela signifie que pour l'utilisation des templates directement dans le DOM, les props en camelCase doivent utiliser leur équivalent kebab-case (délimités par des tirets) : ``` js Vue.component('blog-post', { @@ -55,7 +55,7 @@ Plus tôt, vous avez vu comment passer des props de manière statique comme ceci ``` -vous avez également vu qu'il était possible d'affecter des props dynamiquement avec `v-bind` comme ceci : +Vous avez également vu qu'il était possible d'affecter des props dynamiquement avec `v-bind` comme ceci : ```html @@ -144,9 +144,9 @@ sera équivalent à : Toutes les données forment **un flux de donnée descendant unidirectionnel (« one-way-down binding »)** entre la propriété enfant et la propriété parente : quand la propriété du parent est mise à jour, cela va mettre à jour celle de l'enfant mais pas l'inverse. Cela empêche un composant enfant de muter accidentellement l'état du parent, ce qui rendrait le flux de données de votre application difficile à appréhender. -De plus, chaque fois que le composant parent est mis à jour, toutes les props du composant enfant vont être mises à jour avec les dernières valeurs. Cela signifie que vous ne devriez **pas** essayer du muter une prop depuis l'intérieur d'un composant. Si vous le faite, Vue lancera un avertissement dans la console. +De plus, chaque fois que le composant parent est mis à jour, toutes les props du composant enfant vont être mises à jour avec les dernières valeurs. Cela signifie que vous ne devriez **pas** essayer du muter une prop depuis l'intérieur d'un composant. Si vous le faites, Vue lancera un avertissement dans la console. -Il y a couramment deux cas où vous seriez tenter de muter une prop : +Il y a couramment deux cas où vous seriez tenté de muter une prop : 1. **La prop est seulement utilisée pour passer une valeur initiale ; le composant enfant doit seulement l'utiliser comme donnée de propriété local.** Dans ce cas, le mieux est de définir une propriété locale qui utilise la prop comme valeur initiale : @@ -170,11 +170,11 @@ Il y a couramment deux cas où vous seriez tenter de muter une prop : } ``` -

Notez que les objets et les tableaux en JavaScript sont passés par référence, ce qui signifie que si la prop est un objet ou un tableau, muter l'objet ou le tableu lui-même dans l'enfant **va** affecter l'état du parent.

+

Notez que les objets et les tableaux en JavaScript sont passés par référence, ce qui signifie que si la prop est un objet ou un tableau, muter l'objet ou le tableau lui-même dans l'enfant **va** affecter l'état du parent.

## Validation des props -Les composants peuvent spécifier des conditions requises pour leurs props, comme les types que nous avons déjà vu. Si les conditions requises ne sont pas validées, Vue va vous en avertir dans la console JavaScript du navigateur. Cela est particulièrement utile quand on développe un composant destiné à être utilisé par les autres. +Les composants peuvent spécifier des conditions requises pour leurs props, comme les types que nous avons déjà vus. Si les conditions requises ne sont pas validées, Vue va vous en avertir dans la console JavaScript du navigateur. Cela est particulièrement utile quand on développe un composant destiné à être utilisé par les autres. Pour spécifier des validations de prop, vous pouvez fournir un objet avec les conditions de validation pour les valeurs des `props` plutôt qu'un tableau de chaine de caractère. Par exemple : @@ -232,7 +232,7 @@ Le `type` peut être l'un des constructeurs natifs suivants : - Function - Symbol -En plus, `type` peut aussi être une fonction constructeur personnalisée et l'assertion pourra être testée avec `instanceof`. Par exemple, avec la fonction constructeur existante suivante : +De plus, `type` peut aussi être une fonction constructeur personnalisée et l'assertion pourra être testée avec `instanceof`. Par exemple, avec la fonction constructeur existante suivante : ```js function Person (firstName, lastName) { @@ -259,7 +259,7 @@ Un attribut non prop est un attribut passé à un composant mais qui n'a pas de Bien que définir explicitement les props soit préféré pour passer des informations à un composant enfant, les auteurs de bibliothèques ne peuvent pas deviner dans quel contexte leur composant va être utilisé. C'est pourquoi il est possible qu'un composant puisse accepter des attributs arbitraires qui seront ajoutés sur l'élément racine du composant. -Par exemple, imaginez que vous utilisiez un composant tiers `bootstrap-date-input` avec un plugin Bootstrap qui nécessite un `data-date-picker` attribut sul l'`input`. Nous pouvons ajouter cet attribut à notre instance de composant : +Par exemple, imaginez que vous utilisiez un composant tiers `bootstrap-date-input` avec un plugin Bootstrap qui nécessite un `data-date-picker` attribut sur l'`input`. Nous pouvons ajouter cet attribut à notre instance de composant : ``` html @@ -289,7 +289,7 @@ Dans ce cas, deux valeurs différentes de `class` sont définies : - `form-control`, qui va être appliqué dans le template du composant, - `date-picker-theme-dark`, qui va être passé au composant depuis son parent. -Pour la plupard des attributs, la valeur fournie par le composant va remplacé la valeur définie par le composant. Aussi par exemple, passer `type="text"` va remplacer `type="date"` et probablement tout casser ! Heureusement, les attributs `class` et `style` sont plus malins. Ces deux valeurs sont fusionnées, fournissant la valeur finale `form-control date-picker-theme-dark`. +Pour la plupart des attributs, la valeur fournie par le composant va remplacer la valeur définie par le composant. Aussi par exemple, passer `type="text"` va remplacer `type="date"` et probablement tout casser ! Heureusement, les attributs `class` et `style` sont plus malins. Ces deux valeurs sont fusionnées, fournissant la valeur finale `form-control date-picker-theme-dark`. ### Désactiver l'héritage d'attribut @@ -302,12 +302,12 @@ Vue.component('my-component', { }) ``` -Cela est particulièrement utile avec l'utilisation combinée de la propriété d'instance `$attrs` qui contient les noms et valeurs passées à un composant comme ceci : +Cela est particulièrement utile avec l'utilisation combinée de la propriété d'instance `$attrs` qui contient les noms et valeurs passés à un composant comme ceci : ```js { class: 'username-input', - placeholder: 'Enter your username' + placeholder: 'Entrez votre nom d'utilisateur' } ``` @@ -336,6 +336,6 @@ Ce modèle vous permet d'utiliser des composants de base comme des éléments HT ``` diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md index 9567ba72e4..5989a46223 100644 --- a/src/v2/guide/components-registration.md +++ b/src/v2/guide/components-registration.md @@ -4,11 +4,11 @@ type: guide order: 101 --- -> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez [cette partie](components.html) en premier si les composants sont quelque chose de nouveau pour vous. +> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez-les en premier si les composants sont quelque chose de nouveau pour vous. ## Noms de composant -Lors de la création de composants, il faudra toujours spécifier un nom. Par exemple, la déclaration se fera comme suit : +Lors de la création de composants, il faudra toujours spécifier un nom. Par exemple, la déclaration se fera comme suit : ```js Vue.component('my-component-name', { /* ... */ })