vue中通过$on与$emit实现非父组件间数据通信
Vue组件间通信实现方法很多,主要有:
- 使用Vuex实现项目的状态管理(复杂项目)
- props实现数据传递(父子组件,详细可查Vue官方文档)
- 使用中转站(bus)的方法
之前一直以为兄弟组件之间的通信只能是先派发到共同的父组件,然后由父组件下发到兄弟组件。后来详细阅读vue官方文档,发现了eventBus这一节。。。看来还是多读文档是永远都不会错的。
bus,顾名思义,公共汽车,人人共享,自然也就可以实现不同组件的数据共享。
它主要先定义一个额外的vue实例作为中转站,然后不同组件通过$on与$emit实现,具体见代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>$on与$emit用法</title> <style type="text/css"> .box{width: 300px; padding: 20px; border: 1px solid #000; margin: 0 auto; margin-bottom: 20px;} .red{ color: #F00; } </style> </head> <body> <div id="app"> <com-a></com-a> <com-b></com-b> <com-c></com-c> </div> <script src="js/node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> // 首先定义一个公共vue实例 var eventbus = new Vue(); // 兄弟组件A var A = { template: ` <div class='box'> <h4>这是A组件</h4> <p>{{a}}</p> <input type='button' value='派发我的数据' @click='send'> </div> `, data(){ return { a: '我是A组件的数据哦' } }, methods:{ send(){ eventbus.$emit('a-msg', this.a); } } }; // 兄弟组件B var B = { template: ` <div class='box'> <h4>这是B组件</h4> <p>{{b}}</p> <input type='button' value='派发我的数据' @click='send'> </div> `, data(){ return { b: '我是B组件的数据哦' } }, methods:{ send(){ eventbus.$emit('b-msg', this.b); } } }; // 兄弟组件C var C = { template: ` <div class='box'> <h4>这是C组件</h4> <p class='red'>{{a}}</p> <p class='red'>{{b}}</p> </div> `, data(){ return { a: '', b: '' } }, // 注意这里一定要在在钩子函数中监听 mounted(){ eventbus.$on('a-msg',(data)=>{ this.a = data; }); eventbus.$on('b-msg',(data)=>{ this.b = data; }); } }; window.onload = function () { new Vue({ el: '#app', data: { }, components: { 'com-a': A, 'com-b': B, 'com-c': C } }) } </script> </body> </html>
初始是这样的:
当依次点击A组件与B组件的按钮后会:
以上实现了使用eventBus来完成兄弟组件之间的数据传递。这种处理方案在处理不太复杂的应用是极好的的选择。
(完)