vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)
vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值。不可否认,这些都可以类似父子组件一级一级的转换传递,但是当项目比较大,功能比较复杂的时候,就会变得比较冗余,代码不利于维护;这时候可能会有很多人使用到vuex,但是如果项目中多个组件共享状态比较少,项目比较小,并且全局状态比较少,好像就没有使用vuex来管理数据的必要。 一、中央事件总线(eventBus) 主要是通过在要相互通信的兄弟组件之中,都注册引入一个新的vue实例,然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递,也就是我们常说的bus车事件。 1、首先,全局注册一个新的vue实例,可以放在我们常用的vue项目文件中 js/event-bus.js import Vue from 'vue' export default new Vue() 2、如果不想全局引用可以,在使用的vue文件里使用,举个例子:contentLeft.vue,contentRight.vue 需要将contentLeft.vue与contentRight.vue互相通信 contentLeft.vue <template> <div> {{message}} <button @click="handleClick">test</button>