Vue — 组件通信（三）
最后更新于：2022-04-02 08:08:45
>[success] # 组件通信（三）
~~~
1.了解'$on'与'$emit'
2.根据Vue.js 1.x 的 '$dispatch' 与 '$broadcast' 两方法思路伪造一个，
属于vue.js 2.x 系列同样的方法.其中 '$dispatch'子传父或者孙子传爷爷，
'$broadcast' 则相反，但是只会找到最近的触发
~~~
>[info] ## 了解 '$on'与'$emit'
~~~
1.使用 $on(eventName) 监听事件第二个参数是个方法，
使用 $emit(eventName) 触发事件第二个参数是传值，
这两个方法常见的使用场景就是'bus'
2.要注意 '$on' 监听需要在 mounted 或 created 钩子中来监听。
3.可以参考笔者另一个笔记内容'前端知识 -- 学习整理'，这个思路就是设计
模式中的'发布订阅'模式
~~~
>[danger] ##### 不是只有bus 才能用
~~~
1.$on 监听了自己触发的自定义事件 test，因为有时不确定何时会触发事件，
一般会在 mounted 或 created 钩子中来监听。
~~~
* 自己触发自己的$emit 和 $on,下面写法多此一举建议直接handleEmitEvent触发alter
~~~
~~~
* 运行效果
>[info] ## 自定义 dispatch 和 broadcast 方法 思路
~~~
1.在vue1.x 中'$dispatch' 是子孙组件向父爷组件传递，'broadcast '则相反，
但是只会找到最近的触发
2.两者都是使用'$on' 触发
~~~
>[danger] ##### 定义前看一下vue1.x版本使用
~~~
1.在这里 还要强调说明监听的'$on'要在 mounted 或 created 钩子中来监听。
~~~
* 在子组件定义
~~~
~~~
* 在父组件中使用
~~~
';