1,$on
监听实例上的自定义事件;事件由 $emit 触发;回调函数会接受触发函数传入的参数。
2,$emit
子组件给父组件传值触发的实例事件。
3,两者使用场景
1、子组件给父组件传值
父组件监听子组件传值事件
浏览器控制台打印
2、俩组件之间传值
子组件向父组件传值可以直接用 v-on 监听状态,但是非父组件监听不到,正常可以父组件监听到这个值之后再向其他组件传值,也可以通过 $on 监听来进行传值。
通过 $on 传值需要创建一个公共实例文件作为中间媒介来传递组件之间值的变化。
$emit 和 $on 的事件必须在一个公共的实例上才能触发。
调用示例:
创建一个公共实例文件 EventBus.js 路径在 "@/framework/EventBus.js" 下
两个组件都需要引用这个js
父组件同时调用两个组件
table-data 组件里进行传值
另一个 form 组件接受监听事件放到 create 钩子函数中
table-data 组件点击触发传值之后,form 组件会监听到是否接受到值,接受到之后在箭头函数中返回来。
浏览器控制台打印如图:
浏览器显示如图: