溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文主要對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.js
import 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父子組件與兄弟組件的之間通信方式，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
