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