uni-app同級組件傳值/事件總線

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>

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])

移除全局自定義事件監聽器。

注意事項

• 如果沒有提供參數，則移除所有的事件監聽器；
• 如果只提供了事件，則移除該事件所有的監聽器；
• 如果同時提供了事件與回調，則只移除這個回調的監聽器；
• 提供的回調必須跟$on的回調為同一個才能移除這個回調的監聽器；