vue中组件间的通信

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

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

父给子传值：

 子给父传值：

 

 总结：

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

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

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

2.任意组件间通信（全局事件总线）

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

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

前言：

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

 

实现：

文件所在位置：

 

 代码：

 页面渲染：

 接口传参：

搜索按钮绑定事件：