組件傳參數
NIKEDIN 2020-11-23 component組件routerprops
在 router
中使用組件,會讓路由與組件形成高度的耦合(資料),但也失去了靈活性!
你或許可以在 router
使用 props
來讓組件與路由解開耦合,讓 props
的資料來結耦!
# router 使用 props
傳送參數
(資料)
# 開啟
props
傳送
在 routes 路由中,使用 props: true
開啟以 porps
傳送資料
const router = new VueRouter({
routes: [{ path: '/user/:id', component: User, props: true }],
})
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>',
}
# ▲ 傳參模式 ▲
# 布林模式 Boolean
props: true
當
props: true
,在組件中route.params
全部會被當作props
傳入。 (前提是,你必須要記得接收)router:
const router = new VueRouter({ routes: [{ path: '/user/:id/:name', component: User, props: true }], })
component:
const User = { props: ['id', 'name'], template: '<div>User {{ id }}</div>', }
# 物件模式 Object
props: { 參數名稱: '靜態資料' }
使用物件 模式時,可以直接用物件寫入
靜態資料
routes:
const router = new VueRouter({ routes: [ { path: '/user/:id/:name', component: User, props: { newId: 123, newName: 'naiky', }, }, ], })
component:
const User = { // 此時就算 props 有設 id && name 也是 undefind props: ['newId', 'newName'], template: '<div>User {{ id }}</div>', }
# 函式模式 function
這是最推薦的方式 也是最活用的方式。 可以使用
函式
透過 return 來回傳資料,這樣可以傳送動態的資料,也可以結合上靜態的資料,router:
const router = new VueRouter({ routes: [ { path: '/seatch/:type', component: seatch, props: (route) => ({ type: route.params.type, query: route.query.q, }), }, ], })
component:
const seatch = { props: ['type', 'query'] template: '<div>seatch</div>', }