Skip to content

Traduction de passing-props.md #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 16, 2017
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/en/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
- [Routes nommées](essentials/named-routes.md)
- [Vues nommées](essentials/named-views.md)
- [Redirection et alias](essentials/redirect-and-alias.md)
- [Passing Props to Route Components (En)](essentials/passing-props.md)
- [Passage de props aux composants de route](essentials/passing-props.md)
- [HTML5 History Mode (En)](essentials/history-mode.md)
- Avancé
- [Navigation Guards (En)](advanced/navigation-guards.md)
Expand Down
43 changes: 21 additions & 22 deletions docs/en/essentials/passing-props.md
Original file line number Diff line number Diff line change
@@ -1,53 +1,52 @@
# Passing Props to Route Components (En) <br><br> *Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-router).*
# Passage de props aux composants de route

Using `$route` in your component creates a tight coupling with the route which limits the flexibility of the component as it can only be used on certain urls.
Utiliser `$route` dans vos composants crée un couplage fort à la route qui va limiter la flexibilité du composant qui ne pourra être utilisé que par certaines URLs.

To decouple this component from the router use props:
Pour découpler un composant de son routeur, utilisez les props :

**❌ Coupled to $route**
**❌ Couplé avec `$route`**

``` js
const User = {
template: '<div>User {{ $route.params.id }}</div>'
template: '<div>Utilisateur {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
{ path: '/utilisateur/:id', component: User }
]
})
```

**👍 Decoupled with props**
**👍 Découplé avec les props**

``` js
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
template: '<div>Utilisateur {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true }
{ path: '/utilisateur/:id', component: User, props: true }

// for routes with named views, you have to define the props option for each named view:
// pour les routes avec vues nommées, vous devez définir l'option `props` pour chaque vue nommée :
{
path: '/user/:id',
path: '/utilisateur/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
```

This allows you to use the component anywhere, which makes the component easier to reuse and test.
Cela vous permet d'utiliser le composant n'importe où, ce qui le rend plus facile à réutiliser et à tester.

### Boolean mode
### Mode booléen

When props is set to true, the route.params will be set as the component props.
Quand `props` est mis à `true`, le `route.params` est remplis en tant que props du composant.

### Object mode
### Mode objet

When props is an object, this will be set as the component props as-is.
Useful for when the props are static.
Quand `props` est un objet, cela alimente les props de celui-ci. Utile quand les props sont statiques.

``` js
const router = new VueRouter({
Expand All @@ -57,9 +56,9 @@ const router = new VueRouter({
})
```

### Function mode
### Mode fonction

You can create a function that returns props. This allows you to cast the parameter to another type, combine static values with route-based values, etc.
Vous pouvez créer une fonction qui va retourner les props. Cela vous permet de coercer un paramètre dans un autre type, de combiner les valeurs statiques avec les valeurs des routes, etc.

``` js
const router = new VueRouter({
Expand All @@ -69,8 +68,8 @@ const router = new VueRouter({
})
```

The url: `/search?q=vue` would pass `{query: "vue"}` as props to the SearchUser component.
L'URL `/search?q=vue` passerait `{query: 'vue'}` comme `props` au composant `SearchUser`.

Try to keep the props function stateless, as it's only evaluated on route changes. Use a wrapper component if you need state to define the props, that way vue can react to state changes.
Essayez de garder la fonction de `props` sans état, car il n'est évalué que sur les changements de route. Utilisez un composant englobant si vous avez besoin d'état pour définir les props, ainsi la vue pourra réagir au changement d'état.

For advanced usage, checkout the [example](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js).
Pour une utilisation avancée, jettez un œil à cet [exemple](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js).