# 3、非父子组件间传值 * [3、非父子组件间传值](https://www.kancloud.cn/zheng1234/vuejs/2393780#3_1) * [1.单独的事件中心管理组件间的通信](https://www.kancloud.cn/zheng1234/vuejs/2393780#1_3) * [2.监听事件与销毁事件](https://www.kancloud.cn/zheng1234/vuejs/2393780#2_7) * [3.触发事件](https://www.kancloud.cn/zheng1234/vuejs/2393780#3_12) # 3、非父子组件间传值  ## 1.单独的事件中心管理组件间的通信 ~~~ var eventHub = new Vue () ~~~ ## 2.监听事件与销毁事件 ~~~ eventHub.$on(' add- todo'，addTodo) eventHub.$off('add-todo' ) ~~~ ## 3.触发事件 ~~~ eventHub . Semit ( 'add- -todo', id) ~~~ ~~~ <div id="app"> <div>父组件</div> <div> <button @click="handle">销毁事件</button> </div> <tsdt-tom></tsdt-tom> <tsdt-jerry></tsdt-jerry> </div> <script type="text/javascript" src="./vue.js"></script> <script type="text/javascript"> //兄弟组件之间数据传递 //提供事件中心 var arr = new Vue(); Vue.component('tsdt-tom', { data: function() { return { num: 0 } }, template: ` <div> <div>TOM:{{num}}</div> <div> <button @click='handle'>点击</button> </div> </div> `, methods: { handle: function() { arr.$emit('jerry-event', 2) } }, mounted: function() { //监听事件 arr.$on('tom-event', (val) => { this.num += val; }) } }); Vue.component('tsdt-jerry', { data: function() { return { num: 0 } }, template: ` <div> <div>JERRY:{{num}}</div> <div> <button @click='handle'>点击</button> </div> </div> `, methods: { handle: function() { arr.$emit('tom-event', 1) } }, mounted: function() { //监听事件 arr.$on('jerry-event', (val) => { this.num += val; }) } }); var vm = new Vue({ el: '#app', data: { }, methods: { handle: function() { //点击销毁事件之后就不能触发了 arr.$off('tom-event'); arr.$off('jerry-event'); } } }); ~~~