主页:写程序的小王叔叔的博客欢迎来访👀
支持:点赞
收藏
关注
一、效果
在商品详情中，点击添加购物车按钮 同步 商品首页的添加购物车按钮功能
目的
在vue组件中，实现一个方法多个组件随意调用，不用重新写，不用重新copy，节省时间。
二、基础原理
1、什么是组件通信
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); ：实现的是传递参数
转载声明：本文为博主原创文章，未经博主允许不得转载
⚠️注意 ~
💯本期内容就结束了，如果内容有误，麻烦大家评论区指出！
如有疑问❓可以在评论区💬或私信💬，尽我最大能力🏃♀️帮大家解决👨🏫！
如果我的文章有帮助到您，欢迎点赞+关注✔️鼓励博主🏃，您的鼓励是我分享的动力🏃🏃🏃~
