作為一位Vue工程師，這些開發技巧你都會嗎？
阿新 • • 發佈：2020-03-22
# 路由引數解耦
一般在元件內使用路由引數，大多數人會這樣做：
``` js
export default {
methods: {
getParamsId() {
return this.$route.params.id
}
}
}
```
在元件中使用 `$route` 會使之與其對應路由形成高度耦合，從而使元件只能在某些特定的 URL 上使用，限制了其靈活性。
正確的做法是通過 `props` 解耦
``` js
const router = new VueRouter({
routes: [{
path: '/user/:id',
component: User,
props: true
}]
})
```
將路由的 `props` 屬性設定為 `true` 後，元件內可通過 `props` 接收到 `params` 引數
``` js
export default {
props: ['id'],
methods: {
getParamsId() {
return this.id
}
}
}
```
另外你還可以通過函式模式來返回 `props`
``` js
const router = new VueRouter({
routes: [{
path: '/user/:id',
component: User,
props: (route) => ({
id: route.query.id
})
}]
})
```
文件：[https://router.vuejs.org/zh/guide/essentials/passing-props.html](https://router.vuejs.org/zh/guide/essentials/passing-props.html)
# 函式式元件
函式式元件是無狀態，它無法例項化，沒有任何的生命週期和方法。建立函式式元件也很簡單，只需要在模板新增 `functional` 宣告即可。一般適合只依賴於外部資料的變化而變化的元件，因其輕量，渲染效能也會有所提高。
元件需要的一切都是通過 `context` 引數傳遞。它是一個上下文物件，具體屬性檢視[文件](https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6)。這裡 `props` 是一個包含所有繫結屬性的物件。
函式式元件
``` html
```
``` js
export default {
methods: {
customEvent(index, e) {
console.log(e) // 'some value'
}
}
}
```
文件：[https://cn.vuejs.org/v2/guide/events.html#%E5%86%85%E8%81%94%E5%A4%84%E7%90%86%E5%99%A8%E4%B8%AD%E7%9A%84%E6%96%B9%E6%B3%95](https://cn.vuejs.org/v2/guide/events.html#%E5%86%85%E8%81%94%E5%A4%84%E7%90%86%E5%99%A8%E4%B8%AD%E7%9A%84%E6%96%B9%E6%B3%95)
[https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E4%BA%8B%E4%BB%B6%E6%8A%9B%E5%87%BA%E4%B8%80%E4%B8%AA%E5%80%BC](https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E4%BA%8B%E4%BB%B6%E6%8A%9B%E5%87%BA%E4%B8%80%E4%B8%AA%E5%80%BC)
# 自定義元件雙向繫結
元件 `model` 選項:
> 允許一個自定義元件在使用 v-model 時定製 prop 和 event。預設情況下，一個元件上的 v-model 會把 value 用作 prop 且把 input 用作 event，但是一些輸入型別比如單選框和複選框按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以迴避這些情況產生的衝突。
`input` 預設作為雙向繫結的更新事件，通過 `$emit` 可以更新繫結的值
``` html
{{item.title}}
{{item.content}}
``` 父元件使用 ``` html