本節介紹數據在不同組件間的傳遞
## 路由傳參
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的介紹進行完善，已經非常詳細了，請自行閱讀。
