本文主要對vue 用$emit 與 $on 來進行組件之間的數據傳輸.
主要的傳輸方式有三種：
1.父組件到子組件通信
2.子組件到父組件的通信
3.兄弟組件之間的通信
一、父組件傳值給子組件
父組件給子組件傳子，使用props
//父組件：parent.vue<template> <div> <child :vals = "msg"></child> </div></template><script>import child from "./child";export default { data(){ return { msg:"我是父組件的數據，將傳給子組件" } }, components:{ child }}</script>//子組件：child.vue<template> <div> {{vals}} </div></template><script>export default { props:{ //父組件傳值 可以是一個數組，對象 vals:{ type:String,//類型為字符竄 default:"123" //可以設置默認值 } },}</script>2.子組件到父組件的通信
使用 $emit(eventname,option) 觸發事件,
參數一：自定義事件名稱，寫法,小寫或者用-連接，如event,event-name 不能寫駝峰寫法(eventName)
子組件給父組件傳值，可以在子組件中使用$emit觸發事件的值傳出去,父組件通過事件監聽，獲取數據
但是，這里有一個問題，
1、究竟是由子組件內部主動傳數據給父組件，由父組件監聽接收（由子組件中操作決定什么時候傳值）
2、還是通過父組件決定子組件什么時候傳值給父組件，然后再監聽接收 （由父組件中操作決定什么時候傳值）
兩種情況都有
2.1 : $meit事件觸發,通過子組件內部的事件觸發自定義事件$emit
2.2 : $meit事件觸發， 可以通過父組件操作子組件 (ref)的事件來觸發 自定義事件$emit
第一種情況：
//父組件：parent.vue<template> <div> <child v-on:childevent='wathChildEvent'></child> <div>子組件的數據為：{{msg}}</div> </div></template><script>import child from "./child";export default { data(){ return{ msg:"" } }, components:{ child }, methods:{ wathChildEvent:function(vals){//直接監聽 又子組件觸發的事件，參數為子組件的傳來的數據 console.log(vals);//結果：這是子組件的數據，將有子組件操作觸發傳給父組件 this.msg = vlas; } }}</script>//子組件：child.vue<template> <div> <input type="button" value="子組件觸發" @click="target"> </div></template><script>export default { data(){ return { texts:'這是子組件的數據，將有子組件操作觸發傳給父組件' } }, methods:{ target:function(){ //有子組件的事件觸發 自定義事件childevent this.$emit('childevent',this.texts);//觸發一個在子組件中聲明的事件 childEvnet } },}</script>第二種情況：
//父組件：parent.vue<template> <div> <child v-on:childevent='wathChildEvent' ref="childcomp"></child> <input type="button" @click="parentEnvet" value="父組件觸發" /> <div>子組件的數據為：{{msg}}</div> </div></template><script>import child from "./child";export default { data(){ return{ msg:"" } }, components:{ child }, methods:{ wathChildEvent:function(vals){//直接監聽 又子組件觸發的事件，參數為子組件的傳來的數據 console.log(vals);//這是子組件的數據，將有子組件操作觸發傳給父組件 this.msg = vlas; }, parentEnvet:function(){ this.$refs['childcomp'].target(); //通過refs屬性獲取子組件實例，又父組件操作子組件的方法觸發事件$meit } }}</script>//子組件：child.vue<template> <div> <!-- dothing..... --> </div></template><script>export default { data(){ return { texts:'這是子組件的數據，將有子組件操作觸發傳給父組件' } }, methods:{ target:function(){ //又子組件的事件觸發 自定義事件childevent this.$emit('childevent',this.texts);//觸發一個在子組件中聲明的事件 childEvnet } },}</script>將兩者情況對比，區別就在于$emit 自定義事件的觸發是有父組件還是子組件去觸發
第一種，是在子組件中定義一個click點擊事件來觸發自定義事件$emit,然后在父組件監聽
第二種，是在父組件中第一一個click點擊事件，在組件中通過refs獲取實例方法來直接觸發事件,然后在父組件中監聽
3.兄弟組件之間的通信
（1）、兄弟之間傳遞數據通過事件
（2）、創建一個新Vue的實例，讓各個兄弟共用同一個事件機制。（關鍵點）
（3）、傳遞數據方，通過事件觸發$emit(方法名，傳遞的數據)。
（4）、接收數據方，在mounted()鉤子函數(掛載實例)中 觸發事件$on(方法名，callback(接收數據的數據))，此時callback函數中的this已經發生了改變，可以使用箭頭函數。
//建立一個空的Vue實例,將通信事件掛載在該實例上//emptyVue.jsimport Vue from 'vue'export default new Vue()//兄弟組件a:childa.vue<template> <div> <span>A組件->{{msg}}</span> <input type="button" value="把a組件數據傳給b" @click ="send"> </div></template><script>import vmson from "./emptyVue"export default { data(){ return { msg:"我是a組件的數據" } }, methods:{ send:function(){ vmson.$emit("aevent",this.msg) } }}</script>//兄弟組件b:childb.vue<template> <div> <span>b組件,a傳的的數據為->{{msg}}</span> </div></template><script>import vmson from "./emptyVue"export default { data(){ return { msg:"" } }, mounted(){ vmson.$on("aevent",(val)=>{//監聽事件aevent，回調函數要使用箭頭函數; console.log(val);//打印結果：我是a組件的數據 this.msg = val; }) }}</script>//父組件：parent.vue<template> <div> <childa><childa> <childb></childb> </div></template><script>import childa from "./childa";import childb from "./childb";export default { data(){ return{ msg:"" } }, components:{ childa, childb },}</script>到此，vue中的組件通信傳值基本可以搞定了，但是對于大型復雜的項目，建議采用vuex 狀態管理更適合....
推薦參考學習：https://vuex.vuejs.org/zh-cn/
https://cn.vuejs.org/v2/api/#vm-emit
https://cn.vuejs.org/v2/api/#vm-on
總結
以上所述是小編給大家介紹的vue中的$emit 與$on父子組件與兄弟組件的之間通信方式，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
