前面我们说过父组件和子组件的通信,子组件和父组件的通讯,那么子组件和子组件是如何通信的呢?
这个时候我们要想到使用bus这个变量来解决问题了。
先定义一个全局变量:
import Vue from 'vue'
let bus = new Vue()
export default bus
子组件向另一个组件传递数据:
abcUnread() {
this.apiGet('/message/public/xxxx', '').then((res) => {
this.handelResponse(res, (data) => {
if (res.code == 200) {
if (data.data.unread > 99) {
this.unreads = '...'
} else if (data.data.unread) {
this.unreads = data.data.unread
}
}
// $emit 开始向另一个组件传递数据
bus.$emit('unread', this.unreads)
})
})
},
子组件接收传递过来的数据:
// 获取未读数
unread: function(val) {
// $on 接收传递过来数据
bus.$on('unread', (data) => {
this.unreads = data
})
this.apiGet('/message/xxxx', '').then((res) => {
this.handelResponse(res, (data) => {
if (res.code == 200) {
if (data.data.unread > 99) {
this.unreads = '...'
} else {
this.unreads = data.data.unread
}
}
})
})
},