Vue常用的三种组件通信方式 Props,Emit,Bus...

组件通信的概念 ：

父 传 子
父级调用子元素， 通过子元素的属性来传入数据

父组件传入属性，子组件通过props来接收，在子组件中就可以用this.xxx方式使用。
子级内部通过props来接收对应的数据。
子 传 父

子组件通过$emit(自定义事件名，参数)向父组件发出一个自定义事件，在父组件中的属性监听事件，可以获得子组件中传出来的值
注意： vue中数据默认是单向流动，只能父到子直接传递，但是子到父不能直接修改。
原因： 因为父级的数据不一定只是某个子级在使用，也许还会有其他的子级也在使用这个数据， 如果子级内部可以随意修改父级的数据，很容易就会出现数据混乱。
解决： 如果子级想修改数据，那么需要子级去通知父级，父级接收到这个通知后，再去决定是否修改，就是经典的子传父。

每个组件中之间的都有独自的作用域，组件间的数据是无法共享的但实际开发工作中我们常常需要让组件之间共享数据，这也是组件通信的目的要让它们互相之间能进行通讯，这样才能构成一个有机的完整系统。

组件通信的方案

父传子：props传递数据

        在父组件中通过动态自定义属性来进行传递数据。

父组件：   

 子组件：

 子传父：$emit传递

         在子组件中通过$emit来进行传递自定义事件，后面跟上要传递的参数

 子组件： 

父组件： 

• 子组件通过$emit触发自定义事件，$emit第二个参数为传递的数值
• 父组件绑定监听器获取到子组件传递过来的参数

兄弟传值$Bus中间件：

1、在vue项目src目录中新建一个js文件（文件名：bus.js）

 2、在bus.js中导入Vue的实例并导出

 3、通过bus.$emit进行传递

 4、通过bus.$on来进行接收这个事件，接收参数，在挂载前后进行接收