古詩詞大全網 - 古詩大全 - vue使用props在組件中傳輸和接收參數

vue使用props在組件中傳輸和接收參數

1、在組件中使用props選項定義數據,接收參數;

2、在路由中,使用props選項來進行設置,路由中的props有三種模式:

a、布爾模式:props設置為true,可接收params方式的參數傳遞;

{

path:"bjc/:name/:price",//定義其屬性

component:Bjc,

props:true

},

接收參數:

props: {

keyword: {

type: String,

default: ''

}

},

在瀏覽器中的表現形式: www.qijinn.com/item/search/1/2

b、函數模式:props為函數,可接收query方式參數的傳遞;

路由定義: {

path: '/items/search/result',

name: 'search-result',

meta: {

keepAlive: true

},

component: asyncLoader('items/search-result'),

props: route => route.query

},

傳遞參數:

this.$router.push({

name: 'search-result',

query: { keyword: word.trim() }

});

接收參數:

props: {

keyword: {

type: String,

default: ''

}

},

在瀏覽器中的表現形式: www.qijinn.com/item/search/result?keyword= 七堇年

c、對象模式:props為對象。如果處理靜態數據,可使用對象模式;

{

path:"yc",

component:Yc,

props:{

name:'蜜汁叉燒量版式',

price:648

}

},

接收參數:

props: {

keyword: {

type: String,

default: ''

}

},