vue组件间通信六种方式(完整版),vue组件间的通信方式
组件之间的通信简单来说就是组件之间的数据传输，就像我们日常的打电话一样，是一种通信方式。下面这篇文章主要介绍vue组件如何实现组件通信的相关信息。有需要的朋友可以参考一下。
目录
前言如何解决组件之间的通信？解决方案：父子实现流程：原理图父组件Footer.vue子组件MyCon.vue小case采用父组件App.vue子组件MyProduct.vue效果展示父组件App.vue子组件MyCon.vue商品案例采用子组件到父组件App.vue子组件MyProduct.vue效果展示总结。
前言
每个组件中的变量和数据都是独立的。如果其他组件想要访问另一个组件中的数据，应该怎么做？
如何解决组件之间通讯呢？
解决方案：
您可以使用父组件向子组件传输数据，子组件也可以向父组件传输数据。被称为父亲对儿子，儿子对父亲。
下面详细说说父组件是如何向子组件传输数据的。
父传子
理论：如果一个组件A引入并使用了另一个组件B，那么组件A就是父组件，组件B就是子组件。
实现过程：
1.在父组件中引入、注册和使用子组件。
2.在父组件中子组件的标签上自定义一个属性。左边是定义的名称，右边是父组件中的数据。例如
MyCon :list=list /
3.使用prpos从子组件中的父组件接收数据。例如，prpos:[list]注意，这里的名称必须与父组件相同。
只能由相同的名称定义。
原理图示
父组件 Footer.vue
在父组件的子组件标签上自定义属性。
模板
差异
H1父组件到子组件/h1
！-使用组件自定义属性-
MyCon :name=name :age=age /
/div
/模板
脚本
//引入组件-创建组件-使用组件
//引入组件
从导入MyCon。/mycon . vue ；
导出默认值{
//创建一个组件
组件：{ MyCon }，
//数据
data() {
返回{
姓名：张三，
年龄：38岁，
};
},
};
/脚本
子组件 MyCon.vue
在子组件中，prpos用于从父组件接收数据
模板
差异
H2组件/h2
//直接在标记中使用它
p{{ name }} {{ age }}/p
Button @click=fn 单击以修改道具/按钮的值
/div
/模板
脚本
导出默认值{
//子组件从父组件接收数据。
道具：[姓名，年龄]，
方法：{
fn() {
This.name=白痴谭磊；
this.age=20
},
},
};
/脚本
小案例 采用了父传子
父组件 App.vue
模板
div style= border:1px solid # CCC；保证金：5px填充：5px
H1父组件/h1
！-1.父爱。自定义属性-
我的产品
v-for=列表中的项目
:key=item.id
:price=item.proprice
:info=item.info
:goodname=item.proname
/
/div
/模板
脚本
//导入-注册-使用
从导入我的产品。/my product . vue ；
导出默认值{
data() {
返回{
列表：[
{
id: 1，
Proname:“超级好吃的棒棒糖”，
本体：18.8，
信息：“开业大酬宾，全场八折优惠”，
},
{
id: 2，
proname:‘超级好吃的大鸡腿’，
本体：34.2，
信息：很好吃，快来买，
},
{
id: 3，
Proname:“超级无敌冰淇淋”，
本体：14.2，
信息：“炎热的夏天，来一份冰淇淋”，
},
],
};
},
组件：{ MyProduct }，
};
/脚本
风格
/风格
子组件 MyProduct.vue
模板
div style= border:1px solid # CCC；保证金：5px填充：5px
H2: {{好名字}}/h2
价格：{{ price }}元/人
p{{ info }}/p
/div
/模板
脚本
导出默认值{
道具：[好名字，价格，信息]，
};
/脚本
风格
/风格
效果展示
子传父
实现过程
1.在父组件中引入、注册和使用子组件。
2.将事件监视器添加到父组件的子组件标签中，例如：MyCon @abc=fn/
3.在子组件中触发此自定义监听事件。比如：这个。$emit(abc ，参数)
原理图示
父组件 App.vue
向父组件的子组件标签添加事件监视参数以接收数据。
模板
差异
H1父组件/h1
！-1.添加事件监控-
！-当子组件发生abc事件时，将执行fn功能-
MyCon @abc=fn /
/div
/模板
脚本
//引入子组件
从导入MyCon。/mycon . vue ；
导出默认值{
方法：{
//形式参数接收
fn(obj)
//打印看是否已经获得。
Console.log(fn abc事件发生，obj)；
},
},
组件：{ MyCon }，
};
/脚本
子组件 MyCon.vue
在子组件中触发此自定义监听事件。
模板
差异
H2组件/h2
Button @click=ConFn 子到父/button
/div
/模板
脚本
导出默认值{
方法：{
ConFn() {
Console.log(子组件单击)；
//2.触发abc事件
这个。$emit(abc ，{name:貂毛谭磊 })；
},
},
};
/脚本
商品案例 运用了子传父
父组件 App.vue
模板
div style= border:1px solid # CCC；保证金：5px填充：5px
H1父组件/h1
！-1.父爱。自定义属性-
！-添加自定义事件-
我的产品
列表中的v-for=(item，idx)
:idx=idx
:key=item.id
:price=item.proprice
:info=item.info
:goodname=item.proname
@pdd=fn
/
/div
/模板
脚本
//导入-注册-使用
从导入我的产品。/my product . vue ；
导出默认值{
data() {
返回{
列表：[
{
id: 1，
Proname:“超级好吃的棒棒糖”，
本体：18.8，
信息：“开业大酬宾，全场八折优惠”，
},
{
id: 2，
proname:‘超级好吃的大鸡腿’，
本体：34.2，
信息：很好吃，快来买，
},
{
id: 3，
Proname:“超级无敌冰淇淋”，
本体：14.2，
信息：“炎热的夏天，来一份冰淇淋”，
},
],
};
},
组件：{ MyProduct }，
方法：{
fn(obj)
Console.log(父组件，收到的pdd事件，obj)；
//计算减去几元再重新赋值。
this.list[obj.idx]。proprice-=obj . ran；
},
},
};
/脚本
风格
/风格
子组件 MyProduct.vue
模板
div style= border:1px solid # CCC；保证金：5px填充：5px
H2: {{好名字}}/h2
价格：{{ price }}元/人
p{{ info }}/p
Button @click=bargain 随机议价/button
/div
/模板
脚本
导出默认值{
//子接收
道具：[goodname ， price ， info ， idx]，
方法：{
讨价还价()
//随机数
const ran=math . ceil(math . random()* 10)；
//触发自定义事件
//为了知道哪个产品要降价，你得返回idx下标。
这个。$emit(pdd ，{ idx: this.idx，ran })；
},
},
};
/脚本
风格
/风格
效果展示
总结
关于vue组件如何实现组件通信的这篇文章到此为止。有关vue组件通信的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。