vue中的$emit 與$on父子組件與兄弟組件的之間通信方式

更新時間：2018年05月13日 08:30:36 作者：天高任鳥飛吧

本文主要對vue 用$emit 與 $on 來進(jìn)行組件之間的數(shù)據(jù)傳輸。重點(diǎn)給大家介紹vue中的$emit 與$on父子組件與兄弟組件的之間通信方式，感興趣的朋友一起看看

本文主要對vue 用$emit 與 $on 來進(jìn)行組件之間的數(shù)據(jù)傳輸.

主要的傳輸方式有三種：

1.父組件到子組件通信

2.子組件到父組件的通信

3.兄弟組件之間的通信

一、父組件傳值給子組件

父組件給子組件傳子，使用props

//父組件：parent.vue
<template>
  <div>
    <child :vals = "msg"></child>
  </div>
</template>
<script>
import child from "./child";
export default {
  data(){
    return {
      msg:"我是父組件的數(shù)據(jù)，將傳給子組件"
    }
  },
  components:{
    child
  }
}
</script>

//子組件：child.vue
<template>
  <div>
    {{vals}}
  </div>
</template>
<script>
export default {
   props:{ //父組件傳值 可以是一個數(shù)組，對象
    vals:{
      type:String,//類型為字符竄
     default:"123" //可以設(shè)置默認(rèn)值
    }
  },
}
</script>

2.子組件到父組件的通信

使用 $emit(eventname,option) 觸發(fā)事件,

參數(shù)一：自定義事件名稱，寫法,小寫或者用-連接，如event,event-name 不能寫駝峰寫法(eventName)

子組件給父組件傳值，可以在子組件中使用$emit觸發(fā)事件的值傳出去,父組件通過事件監(jiān)聽，獲取數(shù)據(jù)

但是，這里有一個問題，

1、究竟是由子組件內(nèi)部主動傳數(shù)據(jù)給父組件，由父組件監(jiān)聽接收（由子組件中操作決定什么時候傳值）

2、還是通過父組件決定子組件什么時候傳值給父組件，然后再監(jiān)聽接收（由父組件中操作決定什么時候傳值）

兩種情況都有

2.1 : $meit事件觸發(fā),通過子組件內(nèi)部的事件觸發(fā)自定義事件$emit

2.2 : $meit事件觸發(fā)，可以通過父組件操作子組件 (ref)的事件來觸發(fā) 自定義事件$emit

第一種情況：

//父組件：parent.vue
<template>
  <div>
    <child v-on:childevent='wathChildEvent'></child>
    <div>子組件的數(shù)據(jù)為：{{msg}}</div>
  </div>
</template>
<script>
import child from "./child";
export default {
  data(){
    return{
      msg:""
    }
  },
  components:{
    child
  },
  methods:{
    wathChildEvent:function(vals){//直接監(jiān)聽 又子組件觸發(fā)的事件，參數(shù)為子組件的傳來的數(shù)據(jù)
      console.log(vals);//結(jié)果：這是子組件的數(shù)據(jù)，將有子組件操作觸發(fā)傳給父組件
      this.msg = vlas;
    } 
  }
}
</script>
//子組件：child.vue
<template>
  <div>
    <input type="button" value="子組件觸發(fā)" @click="target">
  </div>
</template>
<script>
export default {
  data(){
      return {
      texts:'這是子組件的數(shù)據(jù)，將有子組件操作觸發(fā)傳給父組件'
      }
  },
  methods:{
    target:function(){ //有子組件的事件觸發(fā) 自定義事件childevent
      this.$emit('childevent',this.texts);//觸發(fā)一個在子組件中聲明的事件 childEvnet
    }
  },
}
</script>

第二種情況：

//父組件：parent.vue
<template>
  <div>
    <child v-on:childevent='wathChildEvent' ref="childcomp"></child>
    <input type="button" @click="parentEnvet" value="父組件觸發(fā)" />
    <div>子組件的數(shù)據(jù)為：{{msg}}</div>
  </div>
</template>
<script>
import child from "./child";
export default {
  data(){
    return{
      msg:""
    }
  },
  components:{
    child
  },
  methods:{
    wathChildEvent:function(vals){//直接監(jiān)聽 又子組件觸發(fā)的事件，參數(shù)為子組件的傳來的數(shù)據(jù)
      console.log(vals);//這是子組件的數(shù)據(jù)，將有子組件操作觸發(fā)傳給父組件
      this.msg = vlas;
    },
    parentEnvet:function(){
      this.$refs['childcomp'].target(); //通過refs屬性獲取子組件實(shí)例，又父組件操作子組件的方法觸發(fā)事件$meit
    }
  }
}
</script>
//子組件：child.vue
<template>
  <div>
   <!-- dothing..... -->
  </div>
</template>
<script>
export default {
  data(){
      return {
      texts:'這是子組件的數(shù)據(jù)，將有子組件操作觸發(fā)傳給父組件'
      }
  },
  methods:{
    target:function(){ //又子組件的事件觸發(fā) 自定義事件childevent
      this.$emit('childevent',this.texts);//觸發(fā)一個在子組件中聲明的事件 childEvnet
    }
  },
}
</script>

將兩者情況對比，區(qū)別就在于$emit 自定義事件的觸發(fā)是有父組件還是子組件去觸發(fā)

第一種，是在子組件中定義一個click點(diǎn)擊事件來觸發(fā)自定義事件$emit,然后在父組件監(jiān)聽

第二種，是在父組件中第一一個click點(diǎn)擊事件，在組件中通過refs獲取實(shí)例方法來直接觸發(fā)事件,然后在父組件中監(jiān)聽

3.兄弟組件之間的通信

（1）、兄弟之間傳遞數(shù)據(jù)通過事件

（2）、創(chuàng)建一個新Vue的實(shí)例，讓各個兄弟共用同一個事件機(jī)制。（關(guān)鍵點(diǎn)）

（3）、傳遞數(shù)據(jù)方，通過事件觸發(fā)$emit(方法名，傳遞的數(shù)據(jù))。

（4）、接收數(shù)據(jù)方，在mounted()鉤子函數(shù)(掛載實(shí)例)中觸發(fā)事件$on(方法名，callback(接收數(shù)據(jù)的數(shù)據(jù)))，此時callback函數(shù)中的this已經(jīng)發(fā)生了改變，可以使用箭頭函數(shù)。

//建立一個空的Vue實(shí)例,將通信事件掛載在該實(shí)例上
//emptyVue.js
import Vue from 'vue'
export default new Vue()
//兄弟組件a:childa.vue
<template>
  <div>
    <span>A組件->{{msg}}</span>
    <input type="button" value="把a(bǔ)組件數(shù)據(jù)傳給b" @click ="send">
  </div>
</template>
<script>
import vmson from "./emptyVue"
export default {
  data(){
    return {
      msg:"我是a組件的數(shù)據(jù)"
    }
  },
  methods:{
    send:function(){
      vmson.$emit("aevent",this.msg)
    }
  }
}
</script>
//兄弟組件b:childb.vue
<template>
   <div>
    <span>b組件,a傳的的數(shù)據(jù)為->{{msg}}</span>
  </div>
</template>
<script>
import vmson from "./emptyVue"
export default {
 data(){
    return {
      msg:""
    }
  },
  mounted(){
    vmson.$on("aevent",(val)=>{//監(jiān)聽事件aevent，回調(diào)函數(shù)要使用箭頭函數(shù);
      console.log(val);//打印結(jié)果：我是a組件的數(shù)據(jù)
      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中的組件通信傳值基本可以搞定了，但是對于大型復(fù)雜的項(xiàng)目，建議采用vuex 狀態(tài)管理更適合....

推薦參考學(xué)習(xí)：https://vuex.vuejs.org/zh-cn/

　　　　　　 https://cn.vuejs.org/v2/api/#vm-emit

　　　　　　 https://cn.vuejs.org/v2/api/#vm-on

總結(jié)

以上所述是小編給大家介紹的vue中的$emit 與$on父子組件與兄弟組件的之間通信方式，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

您可能感興趣的文章: