Vue父子组件以及非父子组件通信

一.祖先组件向后代组件传值–使用 provide / inject

1.祖先组件使用provide提供数据

 

 2.后代组件使用inject注入数据

 

 

 

 结果

 

 二.父子组件通信之使用props和监听器

1、子组件定义props，同时子组件有一个按钮向上提交一个handleClick事件

 

 2、父组件通过props向子组件传递数据，同时在组件上直接监听子组件的事件handleClick

 

 

结果

 

 子组件点击按钮后，父组件监听到事件并把子组件的消息加载出来

 

 三.父子组件通信之使用dispatch和boardcast

vue中$dispatch 和 $broadcast 方法已经被弃用，但很多高级组件还一直在用，像element,dispatch和broadcast更多是用在跨级的组件通信上面
1、首先在main.js中给vue的原型上添加两个方法
dispatch是子组件向上传递事件
boardcast是父级组件向下传递事件

 

 2、使用
因为方法是直接添加到vue原型上的，所以父组件可以直接用$boardcast向子组件传递数据，同时可以直接在mounted中监听来自子组件的dispatch事件，子组件可以直接用$dispatch向父级组件传递数据，同时可以在mounted中监听来自父级组件的boradcast事件

 

 

 

 

 

 

结果

 

 

父级组件点广播消息后，子级组件接收到父级组件的消息

 

 子级组件点来自子组件的后，父级组件也可以接收到子级组件的消息

 

四.中央事件总线bus

公共事件总线eventBus的实质就是创建一个vue实例，通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案
使用方法：
1、在main.js中给vue的原型上初始化eventBus

 

 2、直接使用$eventBus.$emit传递事件

 

 3、在mounted中使用$eventBus.$on监听事件