vue 呼叫c vue元件間的通訊（7種）

1.props和$emit

父元件向子元件傳遞資料是通過prop傳遞的，子元件傳遞資料給父元件是通過$emit觸發事件來做到的.

//子元件child
vue.component('child',
},template:`
`,props:['message'],//設定props屬性值，得到父元件傳遞過來的資料
methods:}})
//父元件parent
vue.component('parent',
},methods:}})

總結：1).父元件傳遞了message資料給子元件，並且通過v-on繫結了乙個getchilddata事件來監聽子元件的觸發事件；

2).子元件通過props得到相關的message資料,最後通過this.$emit觸發了getchilddata事件

2.$attrs和$listeners

第一種方式用來處理父子元件之間的資料傳，而如果父元件a下面有子元件b，元件b下面有元件c,這時如果元件a想傳遞資料給元件c怎麼辦呢？如果採用第一種方法，我們必須讓元件a通過prop傳遞訊息給元件b，元件b在通過prop傳遞訊息給元件c；要是元件a和元件c之間有更多的元件，那採用這種方式就很複雜了。vue 2.4開始提供了$attrs和$listeners來解決這個問題，能夠讓元件a之間傳遞訊息給元件c。

vue.component('c',}})
vue.component('b',
},template:`
`,props:['message'],//得到父元件傳遞過來的資料
methods:}})
vue.component('a',
},methods:,
//執行c子元件觸發的事件
getcdata(val)}})

3. **事件匯流排（$emit/$on）

vue.component('brother1',
},template:`
this is brother1 compoent!
`,methods:}})
vue.component('brother2',}
`,data()
},mounted())}})
//**事件匯流排
var bus=new vue();
template:``})

4. provide和inject在 vue.js 的2.2.0+版本中新增加了 provide 和 inject 選項。他們成對出現，用於父級元件向下傳遞資料。

父元件中通過provider來提供變數，然後在子元件中通過inject來注入變數。不論子元件有多深，只要呼叫了inject那麼就可以注入provider中的資料。而不是侷限於只能從當前父元件的prop屬性來獲取資料，只要在父元件的生命週期內，子元件都可以呼叫。

vue.component('child',
},template:`
})vue.component('parent',,
data()}})

5. v-model父元件通過v-model傳遞值給子元件時，會自動傳遞乙個value的prop屬性，在子元件中通過this.$emit(『input',val)自動修改v-model繫結的值

vue.component('child',,
data()
},methods:
},template:`
})vue.component('parent',}
`,data()}})
template:``})

6. $parent和$children在元件內部可以直接通過子元件$parent對父元件進行操作，父元件也可以通過$children對子元件進行操作.

vue.component('child',,
data()
},methods:
},template:`
})vue.component('parent',
},data()}})
template:``})

7. vuex處理元件之間的資料互動

vuex 實現了乙個單向資料流，在全域性擁有乙個 state 存放資料，當元件要更改 state 中的資料時，必須通過 mutation 進行，mutation 同時提供了訂閱者模式供外部外掛程式呼叫獲取 state 資料的更新。而當所有非同步操作(常見於呼叫後端介面非同步獲取更新資料)或批量的同步操作需要走 action，但 action 也是無法直接修改 state 的，還是需要通過 mutation 來修改 state 的資料。最後，根據 state 的變化，渲染到檢視上。

vue 呼叫c vue元件間的通訊（7種）

vue元件間通訊

vue元件間通訊

vue元件間通訊

vue 呼叫c vue元件間的通訊（7種）

vue元件間通訊

vue元件間通訊

vue元件間通訊

相關推薦