Traduction de components-custom-events

src/v2/guide/components-custom-events.md

@@ -1,34 +1,34 @@
 ---
-title: Custom Events
+title: Événements personnalisés
 type: guide
 order: 103
 ---
 
-> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
+> Cette page présume que vous connaissez déjà les bases sur les [Composants](components.html). Lisez cette section en premier si vous découvrez les composants.
 
-## Event Names
+## Noms d'événements
 
-<p>Cette page est en cours de traduction mais vous pouvez en trouver une ancienne version <a href="https://fr.vuejs.org/v2/guide/components.html">ici</a>. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>Unlike components and props, event names don't provide any automatic case transformation. Instead, the name of an emitted event must exactly match the name used to listen to that event. For example, if emitting a camelCased event name:</p>
+Contrairement aux composants et aux props, les noms d'événements ne fournissent pas de conversion kebab-case/camelCase. Le nom de l'événement émis doit correspondre exactement au nom utilisé pour écouter cet événement. Par exemple, si l'on émet un nom d'événement en camelCase :
 
 ```js
-this.$emit('myEvent')
+this.$emit('monEvenement')
 ```
 
-Listening to the kebab-cased version will have no effect:
+Alors écouter la version kebab-case n'aura pas d'effet :
 
 ```html
-<my-component v-on:my-event="doSomething"></my-component>
+<my-component v-on:mon-evenement="doSomething"></my-component>
 ```
 
-Unlike components and props, event names will never be used as variable or property names in JavaScript, so there's no reason to use camelCase or PascalCase. Additionally, `v-on` event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML's case-insensitivity), so `v-on:myEvent` would become `v-on:myevent` -- making `myEvent` impossible to listen to.
+Contrairement aux composants et aux props, les noms d'événements ne seront jamais utilisés comme noms de variables ou de propriétés en JavaScript, donc il n'y a pas de raison d'utiliser camelCase ou PascalCase. De plus, les écouteurs d'événements  `v-on` à l'intérieur de templates DOM seront automatiquement transformées en minuscules (à cause de l'insensibilité à la casse de HTML), donc `v-on:monEvenement` deviendra `v-on:monevenement` -- rendant `monEvenement` impossible à écouter.
 
-For these reasons, we recommend you **always use kebab-case for event names**.
+Pour ces raisons, nous recommandons de **toujours utiliser la kebab-case pour les noms d'événements**.
 
-## Customizing Component `v-model`
+## Personnaliser le `v-model` du composant
 
-> New in 2.2.0+
+> Nouveauté de la 2.2.0+
 
-By default, `v-model` on a component uses `value` as the prop and `input` as the event, but some input types such as checkboxes and radio buttons may want to use the `value` attribute for a [different purpose](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Value). Using the `model` option can avoid a conflict in such cases:
+Par défaut, `v-model` sur un composant utilise `value` comme prop et `input` comme événement, mais certains types de champs input tels que les cases à cocher et les boutons radio peuvent vouloir utiliser l'attribut `value` à [d'autres fins](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Value). Utiliser l'option `model` permet d'éviter un conflit dans ce genre de cas :
 
 ```js
 Vue.component('base-checkbox', {
@@ -49,25 +49,25 @@ Vue.component('base-checkbox', {
 })
 ```
 
-Now when using `v-model` on this component:
+À présent, quand vous utilisez `v-model` sur ce composant :
 
 ```js
 <base-checkbox v-model="lovingVue"></base-checkbox>
 ```
 
-the value of `lovingVue` will be passed to the `checked` prop. The `lovingVue` property will then be updated when `<base-checkbox>` emits a `change` event with a new value.
+la valeur de `lovingVue` sera passée à la prop `checked`. La propriété `lovingVue` sera ensuite mise à jour quand `<base-checkbox>` émettra un événement `change` avec une nouvelle valeur.
 
-<p class="tip">Note that you still have to declare the <code>checked</code> prop in component's <code>props</code> option.</p>
+<p class="tip">Notez que vous avez toujours besoin de déclarer la prop <code>checked</code> dans l'option <code>props</code> du composant.</p>
 
-## Binding Native Events to Components
+## Relier des événements natifs aux composants
 
-There may be times when you want to listen directly to a native event on the root element of a component. In these cases, you can use the `.native` modifier for `v-on`:
+Il peut y avoir des fois où vous voudrez écouter directement un événement natif sur l'élément racine d'un composant. Dans ces cas-là, vous pouvez utiliser le modificateur `.native` pour `v-on` :
 
 ```html
 <base-input v-on:focus.native="onFocus"></base-input>
 ```
 
-This can be useful sometimes, but it's not a good idea when you're trying to listen on a very specific element, like an `<input>`. For example, the `<base-input>` component above might refactor so that the root element is actually a `<label>` element:
+Cela peut être utile parfois, mais ce n'est pas une bonne idée quand vous essayez d'écouter l'événement sur un élément bien spécifique tel qu'un `<input>`. Par exemple, le composant `<base-input>` pourrait être revu de façon à ce que l'élément racine soit en fait un élément `<label>` :
 
 ```html
 <label>
@@ -80,9 +80,9 @@ This can be useful sometimes, but it's not a good idea when you're trying to lis
 </label>
 ```
 
-In that case, the `.native` listener in the parent would silently break. There would be no errors, but the `onFocus` handler wouldn't be called when we expected it to.
+Dans ce cas, l'écouteur `.native` dans le parent ne fonctionnera plus et vous ne serez pas prévenus. Il n'y aura pas d'erreurs, mais le gestionnaire d'événement `onFocus` ne sera pas appelé quand vous vous y attendrez.
 
-To solve this problem, Vue provides a `$listeners` property containing an object of listeners being used on the component. For example:
+Pour résoudre ce problème, Vue fournit une propriété `$listeners` contenant un objet avec les écouteurs utilisés sur votre composant. Par exemple :
 
 ```js
 {
@@ -91,7 +91,7 @@ To solve this problem, Vue provides a `$listeners` property containing an object
 }
 ```
 
-Using the `$listeners` property, you can forward all event listeners on the component to a specific child element with `v-on="$listeners"`. For elements like `<input>`, that you also want to work with `v-model`, it's often useful to create a new computed property for listeners, like `inputListeners` below:
+En utilisant la propriété `$listeners`, vous pouvez renvoyer tous les écouteurs d'événements sur le composant vers un élément enfant spécifique avec `v-on="$listeners"`. Pour les éléments tels que `<input>`, pour lesquels vous voulez aussi que `v-model` fonctionne, il est souvent utile de créer une nouvelle propriété calculée pour les écouteurs, tels que la propriété `inputListeners` ci-dessous:
 
 ```js
 Vue.component('base-input', {
@@ -100,14 +100,14 @@ Vue.component('base-input', {
   computed: {
     inputListeners: function () {
       var vm = this
-      // `Object.assign` merges objects together to form a new object
+      // `Object.assign` fusionne les objets ensemble pour en former un nouveau
       return Object.assign({},
-        // We add all the listeners from the parent
+        // Nous ajoutons tous les écouteurs du parent
         this.$listeners,
-        // Then we can add custom listeners or override the
-        // behavior of some listeners.
+        // Puis nous pouvons ajouter des écouteurs personnalisés
+        // ou surcharger le comportement de certains écouteurs.
         {
-          // This ensures that the component works with v-model
+          // Cela garantit que le composant fonctionne avec v-model
           input: function (event) {
             vm.$emit('input', event.target.value)
           }
@@ -128,41 +128,41 @@ Vue.component('base-input', {
 })
 ```
 
-Now the `<base-input>` component is a **fully transparent wrapper**, meaning it can be used exactly like a normal `<input>` element: all the same attributes and listeners will work.
+À présent, le composant `<base-input>` est une **enveloppe complètement transparente**, c'est-à-dire qu'il peut être utilisé comme un élément `<input>` normal : tous les mêmes attributs et écouteurs d'événements fonctionneront.
 
-## `.sync` Modifier
+## Modificateur `.sync`
 
-> New in 2.3.0+
+> Nouveauté de la 2.3.0+
 
-In some cases, we may need "two-way binding" for a prop. Unfortunately, true two-way binding can create maintenance issues, because child components can mutate the parent without the source of that mutation being obvious in both the parent and the child.
+Dans certains cas, nous pouvons avoir besoin d'une « liaison à double sens » (*two-way binding*) pour une prop. Malheureusement, une vraie liaison à double sens peut créer des problèmes de maintenance, car les composants enfant peuvent faire muter le parent sans que la source de cette mutation soit explicite que ce soit dans le parent ou l'enfant.
 
-That's why instead, we recommend emitting events in the pattern of `update:my-prop-name`. For example, in a hypothetical component with a `title` prop, we could communicate the intent of assigning a new value with:
+C'est pourquoi à la place, nous recommandons d'émettre des événements en suivant le modèle `update:mon-nom-de-prop`. Par exemple, dans un composant hypothétique avec une prop `titre`, nous pourrions communiquer l'intention d'assigner une nouvelle valeur avec :
 
 ```js
-this.$emit('update:title', newTitle)
+this.$emit('update:titre', nouveauTitre)
 ```
 
-Then the parent can listen to that event and update a local data property, if it wants to. For example:
+Ensuite le parent peut écouter cet événement et mettre à jour une propriété de donnée locale s'il le désire. Par exemple :
 
 ```html
 <text-document
-  v-bind:title="doc.title"
-  v-on:update:title="doc.title = $event"
+  v-bind:titre="doc.titre"
+  v-on:update:titre="doc.titre = $event"
 ></text-document>
 ```
 
-For convenience, we offer a shorthand for this pattern with the `.sync` modifier:
+Pour plus de commodité, nous proposons un raccourci pour cette technique avec le modificateur `.sync` :
 
 ```html
-<text-document v-bind:title.sync="doc.title"></text-document>
+<text-document v-bind:titre.sync="doc.titre"></text-document>
 ```
 
-The `.sync` modifier can also be used with `v-bind` when using an object to set multiple props at once:
+Le modificateur `.sync` peut également être utilisé avec `v-bind` quand on utilise un objet pour assigner plusieurs props à la fois :
 
 ```html
 <text-document v-bind.sync="doc"></text-document>
 ```
 
-This passes each property in the `doc` object (e.g. `title`) as an individual prop, then adds `v-on` update listeners for each one.
+Cela passe chaque propriété dans l'objet `doc` (p. ex. `titre`) en tant que prop individuelle, puis ajoute des écouteurs `v-on` de mise à jour pour chacune.
 
-<p class="tip">Using <code>v-bind.sync</code> with a literal object, such as in <code>v-bind.sync="{ title: doc.title }"</code>, will not work, because there are too many edge cases to consider in parsing a complex expression like this.</p>
+<p class="tip">Utiliser <code>v-bind.sync</code> avec un objet littéral, par exemple <code>v-bind.sync="{ titre: doc.titre }"</code>, ne fonctionnera pas. En effet, il y a trop de cas particuliers à considérer pour pouvoir analyser une telle expression.</p>