From 60d29eeece451fb983ff2043ddde5fe70b3f6840 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 13 Jul 2017 15:36:03 +0200 Subject: [PATCH 1/2] passing-props.md relecture. Signed-off-by: Bruno Lesieur --- docs/en/SUMMARY.md | 2 +- docs/en/essentials/passing-props.md | 43 ++++++++++++++--------------- 2 files changed, 22 insertions(+), 23 deletions(-) diff --git a/docs/en/SUMMARY.md b/docs/en/SUMMARY.md index ef7def6a4..8db4ad52d 100644 --- a/docs/en/SUMMARY.md +++ b/docs/en/SUMMARY.md @@ -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) diff --git a/docs/en/essentials/passing-props.md b/docs/en/essentials/passing-props.md index 0b40a07a5..09d3f5960 100644 --- a/docs/en/essentials/passing-props.md +++ b/docs/en/essentials/passing-props.md @@ -1,36 +1,36 @@ -# Passing Props to Route Components (En)

*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: '
User {{ $route.params.id }}
' + template: '
Utilisateur {{ $route.params.id }}
' } 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: '
User {{ id }}
' + template: '
Utilisateur {{ id }}
' } 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 } } @@ -38,16 +38,15 @@ const router = new VueRouter({ }) ``` -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 alimenter les props de celui-ci. Utile quan les props sont statiques. ``` js const router = new VueRouter({ @@ -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({ @@ -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). From 1aaf203ad6186150f1397e62f09cd19674672837 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 15 Jul 2017 16:35:29 +0200 Subject: [PATCH 2/2] Review @Kocal Signed-off-by: Bruno Lesieur --- docs/en/essentials/passing-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/essentials/passing-props.md b/docs/en/essentials/passing-props.md index 09d3f5960..cd537c503 100644 --- a/docs/en/essentials/passing-props.md +++ b/docs/en/essentials/passing-props.md @@ -46,7 +46,7 @@ Quand `props` est mis à `true`, le `route.params` est remplis en tant que props ### Mode objet -Quand `props` est un objet, cela alimenter les props de celui-ci. Utile quan les props sont statiques. +Quand `props` est un objet, cela alimente les props de celui-ci. Utile quand les props sont statiques. ``` js const router = new VueRouter({