組件傳值--完結篇

來自專欄 Habitat Growing Way

1.父子組件傳值(見父子組件傳值文章)

2.兄弟組件傳值

3.非父子層級的組件傳值

Ⅰ.匯流排機制(Bus，發布訂閱，觀察者)

Ⅱ. Vuex

=======================================================

2.兄弟組件傳值

兄弟組件進行傳值的時候可以利用父級組件進行中轉。

①子組件1發生變化時，向外傳遞一個自定義事件以及需要傳遞的數據，

②父級組件監聽子組件1的自定義事件，並在data中定義該數據，當事件發生時，講傳來的數據賦值給data中的數據

③父組件與子組件2，通過屬性的方式將父組件中data的數據傳遞給子組件2。

<div class="app"> <child-one @change="handleChange"></child-one> <child-two :text="text"></child-two></div>Vue.component(childOne,{ template:<div @click="handleClick">world</div>， methods:{ handleClick (e) { this.$emit(change,e.currentTarget.innerText) } }})Vue.component(childTwo,{ template:<div ref="hello">hello</div>, props:{ text },})new Vue({ el:#app, data:{ text:, }, methods:{ handleChange (data) { this.text = data } }})

總結：

大兒子通過$emit(一個自定義方法,和要傳遞的數據)，

父級組件通過監聽自定義方法獲得傳遞的數據並存在自己的data中，

最後通過屬性的方式傳給二兒子，二兒子利用props接受就能使用這一數據了。

3.非父子層級的組件傳值

Ⅰ匯流排機制

匯流排機制可以運用到非父子層級的組件傳值，

ⅰ Vue.prototype.bus = new Vue()，讓每個vue實例都有bus屬性

ⅱ子組件上定義一個方法，當被點擊時，向外傳遞被點擊想的內容

this.bus.$emit(change,data)

ⅲ使用this.bus.$on獲得該數據

<div id="app"> <child content="你好"></child> <child content="ck"></child></div> <script> Vue.prototype.bus = new Vue() Vue.component(child,{ props:{ content:String, }, data:function(){ return { main:this.content } }, template:<div @click="handleClick">{{main}}</div>, methods:{ handleClick:function(){ this.bus.$emit(change,this.main) } }, mounted:function(){ var that = this this.bus.$on(change,function(msg){ that.main = msg }) } }) var app = new Vue({ el:#app, }) </script>

對於匯流排機制的學習還有待提升。

Ⅱ vuex

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

①在store中存儲需要用到的數據，將store引入到main.js之後，各個組件就能通過this.$store.state取到數據，如需要修改數據就需要通過圖中的流程

②組件：

組件通過this.$store.dispatch(自定義方法,數據)，將數據傳入到actions裡面去

③store:

在store中index.js文件下，增加actions，接受組件dispatch過來的自定義方法，並通過commit方法將傳進來的數據又傳到Mutations中，然後mutations就可以修改到state中的數據，這就是完整的vuex修改數據的流程。

export default new Vuex.Store({ state:{ city: 北京, }, actions: { changeCity (context,city) { context.commit(changeCity,city) } }, mutations: { changeCity (state,city) { state.city = city } },})