vue中通过$on与$emit实现非父组件间数据通信

最新推荐文章于 2024-08-03 17:05:14 发布

weixin_33717117

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量74

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wang-man/p/8982410.html

版权

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来完成兄弟组件之间的数据传递。这种处理方案在处理不太复杂的应用是极好的的选择。

（完）

转载于:https://www.cnblogs.com/wang-man/p/8982410.html

weixin_33717117

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中通过$on与$emit实现非父组件间数据通信

Vue组件间通信实现方法很多，主要有：使用Vuex实现项目的状态管理（复杂项目）props实现数据传递（父子组件，详细可查Vue官方文档）使用中转站（bus）的方法之前一直以为兄弟组件之间的通信只能是先派发到共同的父组件，然后由父组件下发到兄弟组件。后来详细阅读vue官方文档，发现了eventBus这一节。。。看来还是多读文档是永远都不会错的。bus，顾名思义，公...
复制链接

扫一扫