diff --git a/src/v2/guide/components-custom-events.md b/src/v2/guide/components-custom-events.md index d6542bf671..cb2a379001 100644 --- a/src/v2/guide/components-custom-events.md +++ b/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 -

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

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:

+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 - + ``` -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 ``` -the value of `lovingVue` will be passed to the `checked` prop. The `lovingVue` property will then be updated when `` 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 `` émettra un événement `change` avec une nouvelle valeur. -

Note that you still have to declare the checked prop in component's props option.

+

Notez que vous avez toujours besoin de déclarer la prop checked dans l'option props du composant.

-## 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 ``` -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 ``. For example, the `` component above might refactor so that the root element is actually a `