You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
Copy file name to clipboardExpand all lines: docs/en/essentials/passing-props.md
+10-11Lines changed: 10 additions & 11 deletions
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,10 @@
1
1
# Passing Props to Route Components
2
2
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.
4
4
5
-
To decouple this component from the router use props:
5
+
To decouple this component from the router use option `props`:
6
6
7
-
**❌ Coupled to $route**
7
+
**❌ Coupled to `$route`**
8
8
9
9
```js
10
10
constUser= {
@@ -17,7 +17,7 @@ const router = new VueRouter({
17
17
})
18
18
```
19
19
20
-
**👍 Decoupled with props**
20
+
**👍 Decoupled with `props`**
21
21
22
22
```js
23
23
constUser= {
@@ -28,7 +28,7 @@ const router = new VueRouter({
28
28
routes: [
29
29
{ path:'/user/:id', component: User, props:true }
30
30
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:
32
32
{
33
33
path:'/user/:id',
34
34
components: { default: User, sidebar: Sidebar },
@@ -42,12 +42,11 @@ This allows you to use the component anywhere, which makes the component easier
42
42
43
43
### Boolean mode
44
44
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.
46
46
47
47
### Object mode
48
48
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.
51
50
52
51
```js
53
52
constrouter=newVueRouter({
@@ -59,7 +58,7 @@ const router = new VueRouter({
59
58
60
59
### Function mode
61
60
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.
63
62
64
63
```js
65
64
constrouter=newVueRouter({
@@ -69,8 +68,8 @@ const router = new VueRouter({
69
68
})
70
69
```
71
70
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.
73
72
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.
75
74
76
75
For advanced usage, checkout the [example](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js).
0 commit comments