Skip to content

Commit b84021c

Browse files
MachinisteWebposva
authored andcommitted
Doc EN : props vs "props" in passing-props for better comprehension. (#1597)
* Remove unnecessary new line Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Update dev * Use coerce word in replacement of cast. Differetiate usage of `props` to speak about `props` options and "props" to speak about the props concept. Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com> * Update passing-props.md
1 parent de46c0d commit b84021c

File tree

1 file changed

+10
-11
lines changed

1 file changed

+10
-11
lines changed

docs/en/essentials/passing-props.md

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
# Passing Props to Route Components
22

3-
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.
3+
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.
44

5-
To decouple this component from the router use props:
5+
To decouple this component from the router use option `props`:
66

7-
**❌ Coupled to $route**
7+
**❌ Coupled to `$route`**
88

99
``` js
1010
const User = {
@@ -17,7 +17,7 @@ const router = new VueRouter({
1717
})
1818
```
1919

20-
**👍 Decoupled with props**
20+
**👍 Decoupled with `props`**
2121

2222
``` js
2323
const User = {
@@ -28,7 +28,7 @@ const router = new VueRouter({
2828
routes: [
2929
{ path: '/user/:id', component: User, props: true }
3030

31-
// for routes with named views, you have to define the props option for each named view:
31+
// for routes with named views, you have to define the `props` option for each named view:
3232
{
3333
path: '/user/:id',
3434
components: { default: User, sidebar: Sidebar },
@@ -42,12 +42,11 @@ This allows you to use the component anywhere, which makes the component easier
4242

4343
### Boolean mode
4444

45-
When props is set to true, the route.params will be set as the component props.
45+
When `props` is set to `true`, the `route.params` will be set as the component props.
4646

4747
### Object mode
4848

49-
When props is an object, this will be set as the component props as-is.
50-
Useful for when the props are static.
49+
When `props` is an object, this will be set as the component props as-is. Useful for when the props are static.
5150

5251
``` js
5352
const router = new VueRouter({
@@ -59,7 +58,7 @@ const router = new VueRouter({
5958

6059
### Function mode
6160

62-
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.
61+
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.
6362

6463
``` js
6564
const router = new VueRouter({
@@ -69,8 +68,8 @@ const router = new VueRouter({
6968
})
7069
```
7170

72-
The url: `/search?q=vue` would pass `{query: "vue"}` as props to the SearchUser component.
71+
The URL `/search?q=vue` would pass `{query: 'vue'}` as props to the `SearchUser` component.
7372

74-
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.
73+
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.
7574

7675
For advanced usage, checkout the [example](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js).

0 commit comments

Comments
 (0)