企业🤖AI Agent构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
# 非父子组件通信 工作中如果遇到兄弟组件或者跨组件间传递数据又该如何传递信息呢?可以通过 “中央事件总线” 来解决。当然后面还有`store模式`以及`Vuex`来进行解决组件通信问题。 # Vue-Bus中央事件总线 `中央事件总线`就像是公交车一样,每个`公交站`就相当于一个组件,公交车可以通过每个公交站,就相当于中央事件总线可以串联起所有的公交站。 :-: ![](https://img.kancloud.cn/66/d7/66d70720e34120efb42fc3f48b6d60f0_600x400.png) 对于非父子组件之间,如兄弟组件,跨组件之间的数据操作。单击 **组件1按钮** ,操作**组件按钮2**的功能触发。 :-: ![](https://img.kancloud.cn/c1/c1/c1c1d47b8f06eaf51ca7f93b607bd082_233x250.gif) ``` <div class="container" id="app"> <com1></com1> <com2></com2> </div> <script src="js/vue.js"></script> <script> //中央数据总线 //vue-bus var bus = new Vue(); var com1 = { template:`<button @click="myalert()">组件1</button>`, methods:{ myalert(){ bus.$emit('xxx'); } } } var com2 = { template:`<button>组件2</button>`, mounted(){ bus.$on('xxx',function () { alert(1) }) } } var vm = new Vue({ el:"#app", components: { com1, com2 } }) </script> ```