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.

Sign up for GitHub

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

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

Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b44dd98
Remove unnecessary new line
MachinisteWeb Jun 16, 2017
5cfc288
Merge remote-tracking branch 'upstream/dev' into dev
MachinisteWeb Jun 17, 2017
ca0d38a
Update dev
MachinisteWeb Jun 17, 2017
402e529
Merge remote-tracking branch 'upstream/dev' into dev
MachinisteWeb Jul 13, 2017
a949c85
Merge remote-tracking branch 'upstream/dev' into dev
MachinisteWeb Jul 13, 2017
e2ac3a7
Use coerce word in replacement of cast.
MachinisteWeb Jul 13, 2017
51b1193
Update passing-props.md
posva Jul 13, 2017
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
View file
Open in desktop
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 coerce the parameter to another type, combine static values with route-based values, etc.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can coerce to other values, but here we still want to keep cast

Copy link
Contributor Author

@MachinisteWeb MachinisteWeb Jul 13, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tl;dr => It's ok to merge like that for me :)

But

I'm not sure to well understand difference between « cast » and « coerce » :D

For me, « cast » is the action to explicitly convert a type value into another with some keyword usage.
And « coerce » is the action to implicitly convert a type value with the usage of a context or operand.

You means « with the usage of operand » is not "coercing" but is "casting" too? Even the conversion is « implicite » (no « int » or « string » keyword for example)?

Or I not understand the action behind « This allows you to cast the parameter to another type ».

So in JavaScript you coerce, in C# you cast (same for TypeScript no?)


``` 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).