0
点赞
收藏
分享

微信扫一扫

vue中组件间的通信

玉新行者 2022-03-13 阅读 86

组件中的通信方法有很多种,下面就做总结一下经常用到的一些吧!

1. props和$emit
父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$emit触发事件来做到的。

父给子传值:

 子给父传值:

 

 总结:

1).父组件传递了message数据给子组件,并且通过v-on绑定了一个getChildData事件来监听子组件的触发事件;
2).子组件通过props得到相关的message数据,最后通过this.$emit触发了getChildData事件。

使用场景;父子组件通信,比如修改商品信息,弹出对话框等

对于表单数据父子间通信也可以用这

2.任意组件间通信(全局事件总线)

 3、父组件和深层子组件通信

 4、vuex实现多个页面之间数据共享

前言:

业务逻辑复杂,很多组件之间需要同时处理一些公共的数据,这个时候才有上面这一些方法可能不利于项目的维护,vuex的做法就是将这一些公共的数据抽离出来,然后其他组件就可以对这个公共数据进行读写操作,更好的达到目的,就比如近期项目中搜索功能,输入搜索词后会有多个页面,有搜索用户页面,搜索菜单页面,搜索菜谱页面,收藏最多和浏览最多,显然如果在采用之前的方法就没有那么方便了,此时就可以借用vuex来实现这个功能。

实现:

文件所在位置:

 

 代码:

 页面渲染:

 接口传参:

搜索按钮绑定事件:

举报

相关推荐

0 条评论