vue组件之间的通信方式,vue2.x组件通信有哪些方式
Vue框架提供了前端开发组件的思想，组件可以组合成一个完整的页面。随着组件数量的增加，组件之间不可避免地需要相互通信。本文将介绍四个组件之间的通信方式，有需要的可以参考。
目录
序父子组件通信父组件和子组件之间的通信父组件和子组件之间的通信在不考虑组件关系的情况下获取子组件的数据
前言
vue框架提供了组件前端开发的思想，组件可以组合成一个完整的页面。随着组件数量的增加，组件之间不可避免地需要相互通信。那么如何实现组件之间的通信呢？下面介绍几种vue组件通信的方法。
父子组件通信
父组件传递props给子组件(数据和改变数据的方法)，子组件通过$emit更新父组件的状态。
父组件定义、声明状态{name: baidu.com}和可以改变状态的方法update()，通过名称传递和@update将名称属性和更新方法传递给子组件。
模板
差异
子级：@update=update /
/div
/模板
脚本
从导入子级。/components/Child ；
导出默认值{
名称：“应用程序”，
组件：{
孩子，
},
data() {
返回{
名称： baidu.com ，
};
},
方法：{
update() {
this . name= www . Baidu . com ；
},
},
};
/scriptvue
子组件的定义定义props接收name属性，并通过$emit传递更新参数来通知父组件更新状态。
模板
差异
{{ name }}
Button @click=$emit(update )通知父组件数据/button
/div
/模板
脚本
导出默认值{
姓名：孩子，
道具：{
名称：字符串，
},
};
/脚本
父组件与子孙组件的通信
父组件通过provide创建对象，子组件通过inject使用父组件的数据，不受组件级别的限制。
父组件定义要通过提供者传递数据。
模板
差异
孩子/
/div
/模板
脚本
从导入子级。/components/Child ；
导出默认值{
名称：“应用程序”，
组件：{
孩子，
},
提供：{
姓名： www.baidu.com ，
},
};
/脚本
组件控制需要通过inject属性访问哪些属性。
模板
div{{ name }}/div
/模板
脚本
导出默认值{
姓名：孩子，
注入：[name]，
};
/脚本
父组件获取子组件数据
您可以通过引用获取子组件的实例来获取子组件的状态或调用其方法，如下所示。
模板
差异
Child ref=child /
/div
/模板
脚本
从导入子级。/components/Child ；
导出默认值{
名称：“应用程序”，
组件：{
孩子，
},
已安装(){
console.log(这个。$ refs . child . title)；
},
};
/脚本
您可以通过这个获得子组件的实例。$参考文献。子组件并访问子组件的数据。
无需考虑组件关系的通信
vue提供的发布-订阅模式也叫EventBus。
定义一个eventBus实例
从“Vue”导入Vue；
导出默认的新Vue()；
父组件在挂载的生命周期中通过on监听更新事件
模板
差异
孩子：/
/div
/模板
脚本
从导入子级。/components/Child ；
从导入eBus./event bus ；
导出默认值{
名称：“应用程序”，
data() {
返回{
名称： baidu.com ，
};
},
组件：{
孩子，
},
已安装(){
eBus。$on(update ，(val)={
this.name=val
});
},
};
/脚本
组件通过vue实例的$emit触发更新事件。
模板
差异
{{ name }}
Button @click=clickHandle 通知父组件更新/button
/div
/模板
脚本
从导入eBus././event bus ；
导出默认值{
姓名：孩子，
道具：{
名称：字符串，
},
data() {
返回{
标题：“子组件”，
};
},
方法：{
clickHandle() {
eBus。$emit(update ， Hello World )；
},
},
};
/脚本
使用全局状态管理库vuex
这里就不赘述了。有兴趣的可以参考vue的官方文档。
关于Vue组件间四种通信方式的详细解释，本文到此为止。有关Vue组件通信的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。