vue元件之間通訊

2021-09-22 21:29:26 字數 1280 閱讀 3615

個人blog,歡迎關注加收藏

元件之間通訊的幾種方式

1.父向子傳資料:props

2.子向父傳資料:$emit

3.兄弟元件傳資料:

a.**事件匯流排:bus;在父元件的data中bus:new vue();//建立**事件匯流排

b.傳遞資料:this.roo

t.bu

s.

root.bus.

root.b

us.emit(「name」,data);

c.接收資料:this.roo

t.bu

s.

root.bus.

root.b

us.on(「name」,function(data){});

4.路由之間傳參:命名引數

a /:id;//引數命名

b /1;//傳遞實參

接收引數有兩種

c-1.1 props:true,//傳遞引數的props屬性設定

c-1.2 props:[「id」];//接收引數的元件設定同名引數接收

c-2 this.$route.params.id//接收

5.路由之間傳參:查詢引數

a.傳遞引數

:to="}"

this.rou

ter.

push

(pat

h:""

,que

ry:i

d:1)

;b.接

收引數t

his.

router.push(}); b.接收引數 this.

router

.pus

h(pa

th:"

",qu

ery:

id:1

);b.

接收引數

this

.route.query.id//接收

6.pubsub.js框架:元件之間不需要任何關係

a.引入pubsub.js

b.傳遞資料

pubsub.publish(「name」,data);

c.接收資料

pubsub.subscribe(「name」,function(mes,data){});

//mes是前面的name,無作用但必須寫

//data是接收回來的資料

7.父向子傳遞dom結構:可以使用插槽slot

a.用確定在元件之間的位置

b.實際內容必須寫在改組件的標籤內

c.給標籤加上slot="a"即確定為需要傳遞的內容

Vue元件之間通訊

vue元件傳值有以下幾種情況 父元件向子元件傳值 子元件向父元件傳值 兄弟元件之間傳值等 一 父元件向子元件傳值 傳值方式 props 動態傳遞值 子元件son 靜態傳值 父元件 子元件 son 1 prop的大小寫 html中的attribute名對大小寫不敏感,所以prop中的駝峰值需要等價於短...

vue元件之間的通訊

區域性元件 區域性元件必須手動掛載,不然無法生效。全劇元件 全域性元件不需要手動掛載,但不常用,盡量不要在全域性上掛載變數或者元件 影響瀏覽器效能 配合模板實現元件之間的巢狀。元件是vue.js最強大的功能之一,核心目標是擴充套件htnl元素,封裝可重用 元件可按照template,style,sc...

vue元件之間的通訊

作為乙個vue初學者不得不了解的就是元件間的資料通訊 暫且不談vuex 通訊方式根據元件之間的關係有不同之處。元件關係有下面三種 父 子 子 父 非父子 父 子 父向子傳遞資料通過props 父元件 子元件 子 父 子元件向父元件傳遞分為兩種型別。1 子元件改變父元件傳遞的props 你會發現通過p...