摘要：子组件向父组件通信方法一使用事件父组件向子组件传递事件方法，子组件通过触发事件，回调给父组件。非父子组件兄弟组件之间的数据传递非父子组件通信，官方推荐使用一个实例作为中央事件总线。
写在前面
因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。
文章的原地址：https://github.com/answershuto/learnVue。
在学习过程中，为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src，希望可以对其他想学习Vue源码的小伙伴有所帮助。
可能会有理解存在偏差的地方，欢迎提issue指出，共同学习，共同进步。
什么是Vue组件？组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
使用props，父组件可以使用props向子组件传递数据。
父组件vue模板father.vue
子组件vue模板child.vue
{{msg}}
使用$children可以在父组件中访问子组件。
父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件。
父组件vue模板father.vue
子组件vue模板child.vue
这种方法只能在父组件传递一个引用变量时可以使用，字面变量无法达到相应效果。因为饮用变量最终无论是父组件中的数据还是子组件得到的props中的数据都是指向同一块内存地址，所以修改了子组件中props的数据即修改了父组件的数据。
但是并不推荐这么做，并不建议直接修改props的值，如果数据是用于显示修改的，在实际开发中我经常会将其放入data中，在需要回传给父组件的时候再用事件回传数据。这样做保持了组件独立以及解耦，不会因为使用同一份数据而导致数据流异常混乱，只通过特定的接口传递数据来达到修改数据的目的，而内部数据状态由专门的data负责管理。
使用$parent可以访问父组件的数据。
非父子组件通信，Vue官方推荐使用一个Vue实例作为中央事件总线。
Vue内部有一个事件机制，可以参考源码。
$on方法用来监听一个事件。
$emit用来触发一个事件。
/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();
/*监听事件*/
event.$on("eventName", (val) => {
//......do something
});
/*触发事件*/
event.$emit("eventName", "this is a message.");
在Vue1.0中实现了$broadcast与$dispatch两个方法用来向子组件（或父组件）广播（或派发），当子组件（或父组件）上监听了事件并返回true的时候会向爷孙级组件继续广播（或派发）事件。但是这个方法在Vue2.0里面已经被移除了。
之前在学习饿了么的开源组件库element的时候发现他们重新实现了broadcast以及dispatch的方法，以mixin的方式引入，具体可以参考《说说element组件库broadcast与dispatch》。但是跟Vue1.0的两个方法实现有略微的不同。这两个方法实现了向子孙组件事件广播以及向多层级父组件事件派发的功能。但是并非广义上的事件广播，它需要指定一个commentName进行向指定组件名组件定向广播（派发）事件。
其实这两个方法内部实现还是用到的还是$parent以及$children，用以遍历子节点或是逐级向上查询父节点，访问到指定组件名的时候，调用$emit触发指定事件。
当应用足够复杂情况下，请使用vuex进行数据管理。
关于作者：染陌
Email：answershuto@gmail.com or answershuto@126.com
Github: https://github.com/answershuto
Blog：http://answershuto.github.io/
知乎主页：https://www.zhihu.com/people/cao-yang-49/activities
知乎专栏：https://zhuanlan.zhihu.com/ranmo
掘金： https://juejin.im/user/58f87ae844d9040069ca7507
osChina：https://my.oschina.net/u/3161824/blog
转载请注明出处，谢谢。
欢迎关注我的公众号
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/89224.html
摘要：前端日报精选桌面通知精读前端性能优化备忘录聊聊组件间通信的几种姿势到底该如何配置深入理解高阶组件中文第期体系调研报告前端面试总结掘金技术周刊期知乎专栏从试着改进可重用做起掘金式数学作者众成翻译为什么企业进行数码变革要用平台众成 2017-10-23 前端日报 精选 HTML5 桌面通知：Notification API精读《2017前端性能优化备忘录》聊聊Vue.js组件间通信的几种姿...
摘要：浅谈中的组件一初识组件组件是最强大的功能之一。组件可以扩展元素，封装可重用的代码。例子我是组件我要把中的数据传给我是组件中央事件总线我是用来接收从传过来的数据我是中的数据我是根组件的数据 浅谈 vue 中的组件 一 、初识组件 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。 1、定义组件 Vue自定义组件分为两种：全局...
摘要：本文总结了组件间通信的几种方式，如和，以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助。状态改变提交操作方法。前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： showImg(https://user-gold-cdn.xitu.io/2019/5/17/16ac35bf...
摘要：本文总结了组件间通信的几种方式，如和，以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助。状态改变提交操作方法。 前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：showImg(https://segmentfault.com/img/remote/146000001...
摘要：在使用的过程中，不可避免的需要组件间进行消息传递通信，组件间通信大体有下面几种情况父组件向子组件通信子组件向父组件通信非嵌套组件间通信跨级组件之间通信父组件向子组件通信父组件通过向子组件传递，子组件得到后进行相应的处理。 在使用 React 的过程中，不可避免的需要组件间进行消息传递（通信），组件间通信大体有下面几种情况： 父组件向子组件通信 子组件向父组件通信 非嵌套组件间通信 跨...
阅读 2860·2021-11-24 09:39
阅读 705·2021-09-07 10:20
阅读 2230·2021-08-23 09:45
阅读 2043·2021-08-05 10:00
阅读 428·2019-08-29 16:36
阅读 737·2019-08-29 11:12
阅读 2705·2019-08-26 11:34
阅读 1702·2019-08-26 10:56
