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

川长思鸟来 2021-07-25 15:29 1431阅读 0赞

## 效果图： ##

![20210307003902909.gif][]

## 实现代码： ##

![20210307003920802.png][]

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>

[20210307003902909.gif]: /images/20210725/571dcee760be48e9a1dba2a05a599a62.png
[20210307003920802.png]: /images/20210725/d4b004109d374d0ba259c687e49fdc21.png