uniapp中的组件通讯（$emit和$on）

效果图：

实现代码：

bus.js

import Vue from 'vue'
export default new Vue()

component-communication.vue:

<template>
	<view>
        <page-head title="组件通讯示例"/>
        <reciver></reciver>
        <sender></sender>
        <sender-bus></sender-bus>
	</view>
</template>
<script>
    import reciver from './reciver.vue'
    import sender from './sender.vue'
    import senderBus from './sender-bus.vue'
	export default {
        components:{
           reciver,
           sender,
           senderBus
        }
	}
</script>

reciver.vue:

<template>
    <view>
        {{msg===''?'等待接受消息...':'收到消息：'}}{{msg}}
    </view>
</template>

<script>
    import bus from './bus.js'
    export default {
        data() {
            return {
                msg: ''
            }
        },
        created() {
            uni.$on('cc', this.recive)
            bus.$on('cc', this.recive)
        },
        beforeDestroy() {
            uni.$off('cc',this.recive)
            bus.$off('cc', this.recive)
        },
        methods: {
            recive(e) {
                this.msg = e.msg
            }
        }
    }
</script>

sender.vue:

<template>
    <view>
        <button  @click="send">点击发送消息</button>
    </view>
</template>

<script>
    export default {
        methods: {
            send() {
                uni.$emit('cc', {
                    msg: 'From uni.$emit -> ' + parseInt(Math.random() * 10000)
                })
            }
        }
    }
</script>

sender-bus.vue:

<template>
    <view>
        <button type="primary" @click="send">自定义EventBus</button>
    </view>
</template>
<script>
    import bus from './bus.js'
    export default {
        methods: {
            send() {
                bus.$emit('cc', {
                    msg: 'From event bus -> ' + parseInt(Math.random() * 10000)
                })
            }
        }
    }
</script>