vue 從元件通訊到vuex (上)

2022-09-01 06:24:09 字數 983 閱讀 1696

關於vue之間的元件通訊

1: prop,refs 父元件 => 子元件

1) prop

//

//

childtest1.vue}

2) refs

//

//

childtest1.vue}}

2 : $emit 子元件 => 父元件

//

//

childtest1.vue}}

changemsg

上面是簡單的元件通訊,簡單的父子元件傳遞可以使用上述形式,當比較複雜的情況下, 或者元件是相互獨立,而且中間乙個發生變化另乙個變化的時候可以使用vue bus。

3: vue bus 獨立元件 => 獨立元件 (父 => 子 子 => 父)

//

//

childtest1.vue}}

changemsg

changemsgfromtest1

//

childtest2.vue

}changemsgfromtest2

//

childtest.js

import vue from 'vue'export

default

new vue()

上述就可以實現複雜點的元件通訊了,這裡有著注意點,當你使用bus時,通過$on事件獲取消失時,得在元件登出時解除監聽。

這個的缺點時當你的應用比較大時,這個觸發和監聽資訊的**需要在多處使用,這樣我們就需要統一管理了,既便於維護,也方便理解

這個時候就可以用到vuex ,詳情下級分解

Vue筆記(六) Vue元件通訊 Vuex

思路 定義子元件的屬性 自定義 父元件賦值給子元件思路 定義子元件的屬性 ref a 父元件通過 this.refs.a.子元件方法 思路 父元件通過 this.children 0 子元件方法 思路 父元件在元件的生命週期 mounted 用 on定義事件,子元件用this.parent.emit...

Vue筆記(六) Vue元件通訊 Vuex

思路 定義子元件的屬性 自定義 父元件賦值給子元件思路 定義子元件的屬性 ref a 父元件通過 this.refs.a.子元件方法 思路 父元件通過 this.children 0 子元件方法 思路 父元件在元件的生命週期 mounted 用 on定義事件,子元件用this.parent.emit...

詳解Vue 非父子元件通訊方法(非Vuex)

一提到兩個非父子元件通訊方法,有經驗的 coder 肯定會說用 vuex 啊,我個人建議不要為了用 vuex 而用 vuex,除非你的專案很大,耦合度很高,需要大量的儲存一些 data,元件之間通訊頻繁。當然還是要根據自己的業務場景的來決定,總之還是那句話,不要為了用 vuex 而用 vuex!vu...