溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間：2020-08-29 09:03:05 來源：腳本之家 閱讀：365 作者：天高任鳥飛吧 欄目：web開發(fā)

本文主要對vue 用$emit 與 $on 來進行組件之間的數(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è)置默認值
    }
  },
}
</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屬性獲取子組件實例，又父組件操作子組件的方法觸發(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點擊事件來觸發(fā)自定義事件$emit,然后在父組件監(jiān)聽

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

3.兄弟組件之間的通信

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

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

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

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

//建立一個空的Vue實例,將通信事件掛載在該實例上
//emptyVue.js
import Vue from 'vue'
export default new Vue()
//兄弟組件a:childa.vue
<template>
  <div>
    <span>A組件->{{msg}}</span>
    <input type="button" value="把a組件數(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ù)雜的項目，建議采用vuex 狀態(tài)管理更適合....

推薦參考學(xué)習：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ù)大家的！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手