Vue组件传值（二）之非父子组件传值

最新推荐文章于 2024-08-22 14:32:34 发布

weixin_34293246

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量57

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yuzhongyu/p/10485055.html

版权

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>

转载于:https://www.cnblogs.com/yuzhongyu/p/10485055.html

weixin_34293246

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件传值（二）之非父子组件传值

Vue中非父子组件之间是如何实现通信的？　　本章主要讲的是非父子组件传值，父子组件传值请看上一篇文章。　　1、创建新的Vue实例引入项目中，通过$emit、$on来实现非父子组件传值； 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8...
复制链接

扫一扫