個人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...