Vue 元件之間的通訊

2022-05-09 06:30:11 字數 1113 閱讀 5012

元件之間的傳值基本上prop, emit事件分發,vuex管理資料這三大基本就是我的全部,還有一些其他的方法就隨便瞄了一眼,總覺得夠用就好,最近接手的乙個專案裡面就有我不熟悉的,與此同時明白了乙個道理,有時候全面學習乙個東西,不只是是為了自己夠用,也是為了讀懂別人的**。

1 父元件向子元件傳值

父元件:

"listdata

">

2 子元件向父元件傳值(自定義事件從子元件向父元件中傳遞資料)

父元件:

我接收到了:}

3 通過ref屬性在父元件中直接取得子元件中的資料

父元件:

ref="

sonex

">

"getdata

">得到資料: }

4 通過sync實現資料雙向繫結, 從而同步父子元件資料

父元件:

"text

">

得到資料: }

5 狀態管理vuex

1)   什麼是vuex?

vuex是乙個專為vue.js應用程式開發的狀態管理模式。

採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可**的方式發生變化。

2)  應用場景

vuex只能用於單個頁面中不同元件(例如兄弟元件)的資料流通

3)  核心內容

vuex中,有預設的五種基本的物件:

補充:mapgetters、mapactions

很多時候 , $store.state.dialog.show 、$store.dispatch('switch_dialog') 這種寫法又長又臭 , 很不方便 , 我們沒使用 vuex 的時候 , 獲取乙個狀態只需要 this.show , 執行乙個方法只需要 this.switch_dialog 就行了 , 使用 vuex 使寫法變複雜 ,具體使用方法參考官網。

vuex使用案例: 

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