vue引數傳遞

2022-08-23 10:39:11 字數 1971 閱讀 2618

子父元件傳參

1) 父元件->子元件

①在父元件裡面的「子元件佔位便簽」中,動態繫結傳遞引數屬性,屬性名為子元件接收的引數名,屬性值為父元件傳送的引數名。

<

v-child

:a="str"

>

v-child

>

//

jsdata:

②在子元件的props中接受引數

<

p>}

p>

//

jsdata:{},

props:[『a』],

2) 子元件->父元件

①在父元件中定義資料接收方法

get(a)

②在父元件中的「子元件佔位便簽」中新增屬性 @事件名='父元件中的方法(方法不加括號)'

<

v-header

@send

="get"

>

v-header

>

③在子元件中呼叫方法this.$emit('事件名',所需傳遞的資料)

}

//

jsdata

3) slot(插槽,用於傳遞標籤)

①在父元件裡面的「子元件佔位便簽」中插入標籤

<

v-child

>

<

div

slot

=』test』

>這是插槽

div>

v-child

>

②在子元件中使用slot標籤,標籤name屬性設定為所傳遞標籤的slot標籤的值

<

slot

name

=』test』

>

slot

>

2.路由傳參

1)直接使用路由導航傳參

重新整理頁面不會資料不會丟失,適合傳遞key

注:修改路由後不能直接跳轉原路徑

①配置路由

②傳送引數

在需要傳送引數的頁面

a:在router-link設定引數(id為需要傳遞的引數)

:to=』page/id』

b:通過this.$router.push或replace跳轉

@click=』topage()』

topage()`,

})}

③接受引數

this.$route.params.id

2) params

重新整理頁面資料會丟失

通過路由的name屬性來確定配置的路由

然後通過params傳遞引數

①配置路由

②傳送引數

this

.$router.push(

})

③接受引數

this.$route.params.id

3) query

query和params相似,但在位址列顯示引數?id=?&name=?

①配置路由

②傳送引數

this

.$router.push(

})

③接受引數

this.$route.query.id

3.vuex

直接使用在需要的元件呼叫vuex裡面的資料

函式this.$store.state.變數名

函式this.$store.commit('變數名',引數)

(引數直接用,分隔)

vue 靜態引數 Vue 引數傳遞

一 父子元件 1.1父傳子 props 這裡是father元件 這是父元件要傳給子元件的引數 import child from child export default 接受的父元件靜態引數 接受的父元件引數 export default import child from child expor...

vue路由傳遞引數

1.通過path來確定匹配的路由,通過query來傳遞引數 傳參 golist title,id 注意這裡是 router 接參 this.params.brandid this.route.query.id 這裡是 route2.通過路由屬性name確定匹配路由,通過params傳遞引數 傳參 g...

VUE元件傳遞引數

誰用誰,誰就是父元件 全域性元件和區域性元件名字衝突時 區域性元件會把全域性元件頂替掉 父頁面向子元件 ul com 通過屬性名 list 傳遞了乙個陣列資料 1,2,3,4 子元件通過 props 進行接收資料 props 資料的 父傳子 在父元件使用子元件的時候 在子元件的行內標籤新增屬性 在子...