vue兄弟组件传值 中央事件总线及使用时遇到的问题

组件之间传值可以有多种方法,常用的就是:
父子组件之间传递数据,子组件通过props来接受父组件传递的数据;
兄弟组件之间传递数据,使用vuex,
但是对于通信需求简单的组件之间,vue 官网提供了一种更简单的方法叫做 中央事件总线;
下面简单介绍一下中央事件总线的步骤及最近开发中使用中央数据总线遇到的问题。
一,创建中央事件总线,在src/assets/下创建一个eventBus.js,内容如下:

import Vue from 'Vue'
export default new Vue;

我们创建了一个Vue实例,它就是组件之间的通信桥梁

二,创建一个A组件,一个B组件,在A,B组件中分别引入eventBus这个事件总线`

import bus from '../assets/eventBus';

三,从A组件中传递信息

bus.$emit("event",msg);//event是自定义事件名称;msg是需要传递的参数

$emit实例方法相当于触发bus上的事件,附加参数都会传给监听器回调

四,在B组件中接受信息

mounted(){
	bus.$on("event",(msg)=>{...});//第二个参数是个回调函数,就是传过来的参数为msg,在将msg传给这个回调函数
}

1.在mounted中监听了event并把传过来的参数传递给了on监听器的回调函数
2.必须写在mounted里面。

以上是中央事件总线的基本步骤。
但我最近在开发中遇到的情况是,因为在mounted里监听,只能初始化一次,如果想保存传过去的信息(状态),(例如导航栏信息调用后端,当点击信息后,一个组件显示这个信息,中间又跳到别的组件,再跳回来,这个组件还是保留这个信息)
这就需要在组件之间传值后保存这个传递的状态,即触发bus.$on事件后需要记录状态,可以将这个状态记录在url上或者cookie里,然后每次从里面拿数据即可。

发布了1 篇原创文章 · 获赞 0 · 访问量 24

猜你喜欢

转载自blog.csdn.net/cherryjia99/article/details/104341998