本节介绍数据在不同组件间的传递
## 路由传参
1、动态路径参数` { path: '/user/:id', component: User }`，参数值会被设置到 this.$route.params。
但是，在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。使用 props 将组件和路由解耦
2、通过 params 或者 query来 传参
```js
// params
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
// query
this.$router.push({
path: '/describe',
query: {
id: id
}
})
```
上面2种方法组件中必须通过`this.$route`来获取参数，官方推荐通过 props 解耦
```js
// 官方案例
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: Hello }, // No props, no nothing
{ path: '/hello/:name', component: Hello, props: true }, // Pass route.params to props
{ path: '/static', component: Hello, props: { name: 'world' }}, // static values
{ path: '/dynamic/:years', component: Hello, props: dynamicPropsFn }, // custom logic for mapping between route and props
{ path: '/attrs', component: Hello, props: { name: 'attrs' }}
]
})
// 包含命名视图时
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
// props 被设置为 true，route.params 将会被设置为组件属性
{ path: '/user/:id', component: User, props: true },
// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
```
## 父子组件间的数据传递
#### 1、父组件 --> 子组件 (Prop)
Vue官网最近有一次更新，增加对Prop的介绍篇幅。需要注意的时
> 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
#### 2、子组件 --> 父组件 (自定义事件 vm.$emit())
```
// 父组件中监听事件
<child @my-event="handelEvent"></child>
handelEvent(params) {
// 做一些事情
}
// 子组件派发(触发)事件
this.$emit('my-event', params);
```
#### 特别注意：
> 事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称
#### 绑定原生事件
> . native修饰符。
场景：我需要在父组件中为子组件绑定原生事件。例如：
```
<my-component @click="doSomeThing"></my-component>
```
此时，`@click`绑定的是子组件内部的定义事件，事件名是‘click’。因此，点击`my-component `组件，不会触发组件的原生click事件。
. native修饰符功能：在组件中，在子组件的**根元素**上直接监听一个原生事件。
```
// 监听原生事件(click)，相当于 addeventListener('click',fn)
<my-component v-on:click.native="doTheThing"></my-component>
```
#### 关于Prop的双向数据绑定
有时，我们可能需要对一个 prop 进行“双向绑定"。Vue官方推荐以 update:my-prop-name 的模式触发事件取而代之。
在一个包含 `title` prop 的子组件中，我们可以用以下方法表达对其赋新值的意图：
~~~
this.$emit('update:title', newTitle)
~~~
然后父组件可以监听那个事件并根据需要更新一个本地的数据属性。例如：
~~~
<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
></text-document>
~~~
> Vue 2.3.0+ 新增 .sync 修饰符
为了方便起见，Vue为上面这种模式提供一个缩写，即 .sync 修饰符：
```
<text-document v-bind:title.sync="doc.title"></text-document>
```
#### 内容分发 (slot)
## 复杂情况下数据传递 -- Vuex
>Vue官方有专门页面类介绍Vuex，并且最近官方又对Vuex的介绍进行完善，已经非常详细了，请自行阅读。
