（原）VUE组件通信的使用

• 一、效果/目的/业务场景
• 二、基础知识/原理
• 三、实现方式/配置

一、效果/目的/业务场景

1、效果

                  在商品详情中，点击添加购物车按钮 同步 商品首页的添加购物车按钮功能

2、目的

                  在vue组件中，实现一个方法多个组件随意调用，不用重新写，不用重新copy，节省时间。

二、基础知识/原理

     1、什么是组件通信？

           解释：[ https://www.jianshu.com/p/bfde682101ca   ]-------------推荐使用和参考，具体很详细的。

                     [ https://blog.csdn.net/helloyongwei/article/details/82384551 ]

                     [ https://www.cnblogs.com/fundebug/p/10884896.html  ]

     2、解释具体包括哪些？

         1，父子组件之间

             1.1，子传父，通过emit发送事件，然后父组件通过emit发送事件，然后父组件通过on来接收事件[ 个人建议使用 方便快捷 ]

             1.2，其实还有一种情况，父传子也可以通过$emit来传递

         2， 非父子之间的传递

             2.1 一般简单的就用eventBus了

三、实现方式/配置

使用：

        准备两个VUE页面，分别是：A.VUE 和 B.VUE，目的是，要在B的页面某个方法中需要使用A的页面的某个方法，并成功完成B中当前方法的业务需求。

      A.VUE，在methods中准备好要被调用的方法，在mounted中准备一下代码

 mounted() {   console.log(3);      this.$root.$on('toCakeDetail',this.addCart);      this.$root.$off('toCakeDetail');//目的是 调用一次之后就要关闭，因为组件调用是层级顺序，所以调用一次关闭      console.log(4);  }

     B.VUE在methods中写上要调用的方法

 toDetail : function () {   console.log(1);   console.log(this.index);   this.$root.$emit("toCakeDetail",this.index);   console.log(2);   return;}

    以上就是根据VUE的原理及理论得到的两个实战代码块，可以直接在浏览器控制台中直接打印log，并且log的顺序依次是1.2.3.4的顺序。

  【扩展】：

               this.$root.$emit("toCakeDetail",this.index);  ：实现的是传递参数

以上是自己整理的，并测试过，可以直接用

-------------------------------------------------- -------------------------------------------------- ------------

文章中，有问题，可以在评论区评论

-------------------------------------------------- -------------------------------------------------- ------------

转载声明：本文为博主原创文章，未经博主允许不得转载

如果我的文章有帮助到您，欢迎打赏一下鼓励博主