怎樣操作vue中$emit與$on父子與兄弟組件通信

來源：懂視網責編：小采時間：2020-11-27 19:44:00

怎樣操作vue中$emit與$on父子與兄弟組件通信

怎樣操作vue中$emit與$on父子與兄弟組件通信:這次給大家帶來怎樣操作vue中$emit 與$on父子與兄弟組件通信，操作vue中$emit 與$on父子與兄弟組件通信的注意事項有哪些，下面就是實戰案例，一起來看一下。主要的傳輸方式有三種：1.父組件到子組件通信2.子組件到父組件的通信3.兄弟組件之間的通信一、父組

推薦度：

點擊下載本文 文檔為doc格式

導讀怎樣操作vue中$emit與$on父子與兄弟組件通信:這次給大家帶來怎樣操作vue中$emit 與$on父子與兄弟組件通信，操作vue中$emit 與$on父子與兄弟組件通信的注意事項有哪些，下面就是實戰案例，一起來看一下。主要的傳輸方式有三種：1.父組件到子組件通信2.子組件到父組件的通信3.兄弟組件之間的通信一、父組

這次給大家帶來怎樣操作vue中$emit 與$on父子與兄弟組件通信，操作vue中$emit 與$on父子與兄弟組件通信的注意事項有哪些，下面就是實戰案例，一起來看一下。

主要的傳輸方式有三種：

1.父組件到子組件通信

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

3.兄弟組件之間的通信

一、父組件傳值給子組件

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

//父組件：parent.vue
<template>
 <p>
 <child :vals = "msg"></child>
 </p>
</template>
<script>
import child from "./child";
export default {
 data(){
 return {
 msg:"我是父組件的數據，將傳給子組件"
 }
 },
 components:{
 child
 }
}
</script>
//子組件：child.vue
<template>
 <p>
 {{vals}}
 </p>
</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>
 <p>
 <child v-on:childevent='wathChildEvent'></child>
 <p>子組件的數據為：{{msg}}</p>
 </p>
</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>
 <p>
 <input type="button" value="子組件觸發" @click="target">
 </p>
</template>
<script>
export default {
 data(){
 return {
 texts:'這是子組件的數據，將有子組件操作觸發傳給父組件'
 }
 },
 methods:{
 target:function(){ //有子組件的事件觸發 自定義事件childevent
 this.$emit('childevent',this.texts);//觸發一個在子組件中聲明的事件 childEvnet
 }
 },
}
</script>

第二種情況：

//父組件：parent.vue
<template>
 <p>
 <child v-on:childevent='wathChildEvent' ref="childcomp"></child>
 <input type="button" @click="parentEnvet" value="父組件觸發" />
 <p>子組件的數據為：{{msg}}</p>
 </p>
</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>
 <p>
 <!-- dothing..... -->
 </p>
</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.js
import Vue from 'vue'
export default new Vue()
//兄弟組件a:childa.vue
<template>
 <p>
 <span>A組件->{{msg}}</span>
 <input type="button" value="把a組件數據傳給b" @click ="send">
 </p>
</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>
 <p>
 <span>b組件,a傳的的數據為->{{msg}}</span>
 </p>
</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>
 <p>
 <childa><childa>
 <childb></childb>
 </p>
</template>
<script>
import childa from "./childa";
import childb from "./childb";
export default {
 data(){
 return{
 msg:""
 }
 },
 components:{
 childa,
 childb
 },
}
</script>

到此，vue中的組件通信傳值基本可以搞定了，但是對于大型復雜的項目，建議采用vuex 狀態管理更適合....

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

怎樣操作vue中$emit與$on父子與兄弟組件通信

推薦度：

點擊下載本文 文檔為doc格式

標簽： VUE 通信組件

熱門焦點

怎樣操作vue中$emit與$on父子與兄弟組件通信

怎樣操作vue中$emit與$on父子與兄弟組件通信

怎樣操作vue中$emit與$on父子與兄弟組件通信

最新推薦

猜你喜歡

熱門推薦