同级组件传值/事件总线 eventBus

1、创建eventBus.js

import vue from "vue"
export const eventBus = new vue()

2、通过eventBus.$emit('参数一名称','参数二数据')

<template>
    <view>
        <button type="default" @click="change">按钮</button>
    </view>
</template>

<script>
    import {eventBus} from "../../utils/eventBus.js"
    export default {
        name:'coma',
        methods:{
            change(){
                eventBus.$emit('aMsg','来自a')
            }
        },
        data() {
            return {
                
            }
        }
    }
</script>

<style>

</style>

3、通过eventBus.$on('参数一名字','参数二回调函数')接收

<template>
    <view>
        {{msg}}
    </view>
</template>

<script>
    import {eventBus} from '../../utils/eventBus.js'
    
    export default {
        name:'comb',
        data() {
            return {
                msg:'111'
            }
        },
        methods: {
            
        },
        mounted(){
            eventBus.$on('aMsg',(msg) => {
                this.msg = msg
                console.log(msg)
            })
        }
    }
</script>

<style>

</style>

注意：

eventBug在触发后需要手动移除，否则在切换路由后仍旧会触发，可能造成内存泄漏

移除eventBus

eventBus.$off('事件名')

 

1、触发事件

       在uni中可以通过uni.$emit(eventName,OBJECT)来触发全局的自定事件。附加参数都会传给监听器回调。

        methods: {
            change() {
                uni.$emit('aMsg',this.coma)
            }
        },

2、监听事件

uni.$on(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

        mounted(){
            uni.$on('aMsg',(msg) => {
                this.msg = msg
                console.log(msg)
            })
        }

3、只监听一次

uni.$once(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。

mounted(){
            uni.$once('aMsg',(msg) => {
                this.msg = msg
                console.log(msg)
            })
        }

4、移除监听（不写参数清除所有监听）

uni.$off([eventName, callback])

移除全局自定义事件监听器。

 

关于传值成功但是data中的数据不刷新的问题，router-view需要用keep-alive包起来

          <keep-alive>
            <router-view></router-view>
          </keep-alive>

 

注意事项

• 如果没有提供参数，则移除所有的事件监听器；
• 如果只提供了事件，则移除该事件所有的监听器；
• 如果同时提供了事件与回调，则只移除这个回调的监听器；
• 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；