Vue元件之間的通訊

2021-10-03 14:25:41 字數 776 閱讀 5701

父子元件通訊

父元件控制子元件,父元件控制自己的資料變化,將變化後的資料通過props自定義屬性傳給子元件

1.在元件標籤上使用自定屬性

2.在元件內部通過props來接受自定義屬性

3.接受完了即可以在元件裡直接使用 ,但是只能用不能改

}

這裡是元件

}

子父元件通訊

子元件控制父元件的資料,父元件控制自己的資料變化,將控制函式通過emit自定義事件傳遞子元件,供子元件呼叫

1.在元件標籤繫結乙個自定義事件

2.在元件的內部通過$emit 觸發這個自定義事件

這裡是子元件

這裡是子元件的按鈕

兄弟通訊

兄弟元件的通訊就是父子元件通訊和子父元件通訊的結合,需要父元件作為中間元件進行資料傳遞。

這裡是元件1

這裡是元件2

顯示隱藏

vue.component('son1',)

vue.component('son2',

},})let vm1 = new vue(,

methods:

},})

元件1 和元件2 是兄弟

元件1 有div 可以顯示隱藏

元件2 有butoon 控制顯示隱藏

控制顯示隱藏的值放在公有的爸爸上

vue元件之間通訊

個人blog,歡迎關注加收藏 元件之間通訊的幾種方式 1.父向子傳資料 props 2.子向父傳資料 emit 3.兄弟元件傳資料 a.事件匯流排 bus 在父元件的data中bus new vue 建立 事件匯流排 b.傳遞資料 this.roo t.bu s.root.bus.root.b us...

Vue元件之間通訊

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

vue元件之間的通訊

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