Skip to content

Doc EN : props vs "props" in passing-props for better comprehension. #1597

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 7 commits into from
Jul 13, 2017
Merged
Changes from all 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
21 changes: 10 additions & 11 deletions docs/en/essentials/passing-props.md
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -17,7 +17,7 @@ const router = new VueRouter({
})
```

**👍 Decoupled with props**
**👍 Decoupled with `props`**

``` js
const User = {
Expand All @@ -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 },
Expand All @@ -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({
Expand All @@ -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({
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.
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).