Vue组件传值（二）之 非父子组件传值
Vue中非父子组件之间是如何实现通信的？
本章主要讲的是非父子组件传值，父子组件传值请看上一篇文章。
1、创建新的Vue实例引入项目中，通过$emit、$on来实现非父子组件传值；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Vue非父子组件传值-雨中愚</title> 8 </head> 9 <body> 10 <div id="app"></div> 11 </body> 12 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 13 <script> 14 //创建新的Vue实例，引入Vue原型中，方便调用； 15 Vue.prototype.eventBus = new Vue(); 16 17 const child1 = {23 methods:{ 24 handleSendMsg(){ 25 //通过$emit向外层触发事件并传递参数；第一个参数是事件名字随便起但需跟$on中的事件名字一样 26 this.eventBus.$emit('eventName','第二个参数是你想要传递的值') 27 }, 28 }, 29 template: 30 `<div> 31 <h2>我是组件1</h2> 32 <button @click="handleSendMsg">向其他组件发送值</button> 33 <hr/> 34 </div>`, 35 } 36 37 const child2 = { 38 data:function(){ 39 return { 40 msg: '', 41 } 42 }, 43 mounted(){ 44 //$on监听child1组件的事件来实现传值；第一个参数是事件名字随便起但需跟$emit中的事件名字一样，第二个为回调函数 45 this.eventBus.$on('eventName',(data)=>{ 46 //触发事件才会执行； 47 this.msg = data; 48 }) 49 }, 50 template: 51 `<div> 52 <h2>我是组件2</h2> 53 <p>接收到的值事：{{msg}}</p> 54 </div>`, 55 } 56 57 var vm = new Vue({ 58 el: "#app", 59 components:{ 60 child1, 61 child2 62 }, 63 template:` 64 <div> 65 <child1/> 66 <child2/> 67 </div> 68 `, 69 }) 70 </script> 71 </html>
2、是否感觉非父子之间传值很神奇，那么如何自己实现$on、$emit、$off，通过写入下面标红代码即可实现非父子组件传值；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Vue非父子组件传值-雨中愚</title> 8 </head> 9 <body> 10 <div id="app"></div> 11 </body> 12 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 13 <script> 14 15 const eventList = {}; 16 const $on = function(eventName,cb){ 17 if(!eventList[eventName]){ 18 eventList[eventName] = []; 19 } 20 eventList[eventName].push(cb); 21 } 22 const $emit = function(eventName,params){ 23 if(!eventList[eventName]){ 24 return; 25 } 26 var eventarr = eventList[eventName]; 27 eventarr.map(cb=>{ 28 cb(params); 29 }) 30 } 31 const $off = function(eventName){ 32 eventList[eventName]=[]; 33 } 34 35 const eventBus = { 36 $on, 37 $emit, 38 $off 39 } 40 Vue.prototype.eventBus = eventBus; 41 42 const child1 = {48 methods:{ 49 handleSendMsg(){ 50 //通过$emit向外层触发事件并传递参数；第一个参数是事件名字随便起但需跟$on中的事件名字一样 51 this.eventBus.$emit('eventName','第二个参数是你想要传递的值') 52 }, 53 }, 54 template: 55 `<div> 56 <h2>我是组件1</h2> 57 <button @click="handleSendMsg">向其他组件发送值</button> 58 <hr/> 59 </div>`, 60 } 61 62 const child2 = { 63 data:function(){ 64 return { 65 msg: '', 66 } 67 }, 68 mounted(){ 69 //$on监听child1组件的事件来实现传值；第一个参数是事件名字随便起但需跟$emit中的事件名字一样，第二个为回调函数 70 this.eventBus.$on('eventName',(data)=>{ 71 //触发事件才会执行； 72 this.msg = data; 73 }) 74 }, 75 template: 76 `<div> 77 <h2>我是组件2</h2> 78 <p>接收到的值事：{{msg}}</p> 79 </div>`, 80 } 81 82 var vm = new Vue({ 83 el: "#app", 84 components:{ 85 child1, 86 child2 87 }, 88 template:` 89 <div> 90 <child1/> 91 <child2/> 92 </div> 93 `, 94 }) 95 </script> 96 </html>
