diff --git a/docs/en/essentials/passing-props.md b/docs/en/essentials/passing-props.md index 4243c0cfe..deb0caf1d 100644 --- a/docs/en/essentials/passing-props.md +++ b/docs/en/essentials/passing-props.md @@ -1,10 +1,10 @@ # Passing Props to Route Components -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. +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. -To decouple this component from the router use props: +To decouple this component from the router use option `props`: -**❌ Coupled to $route** +**❌ Coupled to `$route`** ``` js const User = { @@ -17,7 +17,7 @@ const router = new VueRouter({ }) ``` -**👍 Decoupled with props** +**👍 Decoupled with `props`** ``` js const User = { @@ -28,7 +28,7 @@ const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true } - // for routes with named views, you have to define the props option for each named view: + // for routes with named views, you have to define the `props` option for each named view: { path: '/user/:id', components: { default: User, sidebar: Sidebar }, @@ -42,12 +42,11 @@ This allows you to use the component anywhere, which makes the component easier ### Boolean mode -When props is set to true, the route.params will be set as the component props. +When `props` is set to `true`, the `route.params` will be set as the component props. ### Object mode -When props is an object, this will be set as the component props as-is. -Useful for when the props are static. +When `props` is an object, this will be set as the component props as-is. Useful for when the props are static. ``` js const router = new VueRouter({ @@ -59,7 +58,7 @@ const router = new VueRouter({ ### Function mode -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. +You can create a function that returns props. This allows you to cast parameters into other types, combine static values with route-based values, 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. +The URL `/search?q=vue` would pass `{query: 'vue'}` as props to the `SearchUser` component. -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. +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. For advanced usage, checkout the [example](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js).