主页:​写程序的小王叔叔的博客​​欢迎来访

支持:点赞VUE组件通信的使用_组件通信方式VUE组件通信的使用_组件通信方式_02​收藏VUE组件通信的使用_VUE_03关注VUE组件通信的使用_基础原理_04

一、效果

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

VUE组件通信的使用_代码块_05VUE组件通信的使用_代码块_06​  VUE组件通信的使用_VUE_07VUE组件通信的使用_VUE_08

目的

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

二、基础原理

 1、什么是组件通信

VUE组件通信的使用_代码块_09VUE组件通信的使用_传递参数_10

VUE组件通信的使用_代码块_11VUE组件通信的使用_组件通信方式_12  

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);

}

VUE组件通信的使用_代码块_13B.VUE在methods中写上要调用的方法

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

}

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

  【扩展】:

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


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


⚠️注意 ~

💯本期内容就结束了,如果内容有误,麻烦大家评论区指出!

如有疑问❓可以在评论区💬或私信💬,尽我最大能力🏃‍♀️帮大家解决👨‍🏫!

如果我的文章有帮助到您,欢迎点赞+关注✔️鼓励博主🏃,您的鼓励是我分享的动力🏃🏃🏃~