uni-app和vue兄弟组件传递信息

事件总线

事件总线是对发布-订阅模式的一种实现，是一种集中式事件处理机制，允许不同的组件之间进行彼此通信而又不需要相互依赖，达到一种解耦的目的。

uni-app

uni.$emit(eventName,OBJECT)

来触发全局的自定事件。附加参数都会传给监听器回调。

<button @click="giveSmall">给小头</button>

giveSmall(){
				uni.$emit('dead','给小脑袋的')
				uni.$emit('birth','2023.2.14')
			}

uni.$on(eventName,callback)

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

uni.$on('dead',(data)=>{
				console.log(data);
				this.msg=data
			})

uni.$once(eventName,callback)

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

uni.$once('dead',(data)=>{
				console.log(data);
				this.msg=data
			})

uni.$off([eventName, callback])

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

<button @click="off">截胡</button>

off(){
	uni.$off('dead')
}

vue

初始化

1. 首先需要创建事件总线并将其导出，以便其它模块可以使用或者监听它。我们可以通过两种方式来处理。先来看第一种，新创建一个 .js 文件，比如 event-bus.js

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

2. 直接在项目中的 main.js 初始化 EventBus

// main.js
Vue.prototype.$EventBus = new Vue()

发送事件

<template>
    <button @click="giveSmall">-</button>
</template>

import { EventBus } from "../event-bus.js";
giveSmall() {
  EventBus.$emit("secret", '给小的秘密');
}

接收事件

<template>
  <div>{{msg}}</div>
</template>

import { EventBus } from "../event-bus.js";
export default {
  data(){
    return {
      msg: ''
    }
  },
  created() {
    EventBus.$on("secret", (data) => {
      this.msg = data;
    });
  }
};

移除事件监听者

EventBus.$off('secret')

参考文章