本篇资料来于官方文档：
父子组件通信
①访问子组件、父组件、根组件；
this.$parent 访问父组件
this.$children 访问子组件（是一个数组）
this.$root 根实例的后代访问根实例
示例代码：
<div> 父组件： <input v-model="val"><br/> 子组件： <test :test="val"></test> </div> <script> var vm = new Vue({ el: '#app', data: { val: 1 }, components: { test: { props: ['test'], template: "<input @keyup='findParent' v-model='test'/>", methods: { findParent: function () { console.log(this.$parent); //访问根组件 console.log(this.$parent.val); //访问根组件的val属性 console.log(this.$parent.$children.indexOf(this)); //查看当前能否在其父组件的子组件中找到索引 console.log(this.$parent === this.$root); //查看父组件和根组件是不是全等的（因为他的父组件就是根组件） } } } } }); </script>
当在子组件的输入框按键弹起时，显示内容依次为：
父组件、父组件的输入框的值（默认情况是1）、0（表示是父组件的children属性中的第一个元素）、true（由于父组件就是根组件，所以是全等的）；
通过这样的方法，可以在组件树中进行互动。
②自定义事件：
首先，事件需要放置在events属性之中，而不是放置在methods属性中（新手很容易犯的错误），只能触发events属性中的事件，而methods属性中的事件是无法触发的。
其次，向上派发和向下广播有所区别：向上派发会触发自身同名事件，而向下广播不会；
第三，向上派发和向下广播默认只会触发直系（子或者父，不包括祖先和孙）的事件，除非事件返回值为true，才会继续在这一条线上继续。
第四，事件不能显式的通过 this.事件名 来调用它。
示例代码：
<div> 父组件： <button @click="parentClick">点击向下传播broadcast</button> <br/> 子组件1： <children1></children1> <br/> 另一个子组件1： <another-children1></another-children1> </div> <script> var vm = new Vue({ el: '#app', data: { val: 1 }, methods: { parentClick: function () { this.$broadcast("parentClick", "abc"); } }, events: { childrenClick: function () { console.log("childrenClick-Parent"); }, parentClick: function () { console.log("parentClick-Parent"); return true; } }, components: { children1: { //这个无返回值，不会继续派发 props: ['test'], template: "<button>children1</button></br>子组件2：<children2></children2>", events: { childrenClick: function () { console.log("childrenClick-children1"); }, parentClick: function (msg) { console.log("parentClick-Children1"); console.log("message:" + msg); } }, components: { children2: { props: ['test'], template: "<button @click='findParent'>children-Click</button>", methods: { findParent: function () { this.$dispatch('childrenClick'); } }, events: { childrenClick: function () { console.log("childrenClick-children2"); }, parentClick: function (msg) { console.log("parentClick-Children2"); console.log("message:" + msg); } } } } }, anotherChildren1: { //这个是返回值为true，会继续向子组件的子组件派发 props: ['test'], template: "<button>anotherChildren1</button></br>另一个子组件2：<another-children2></another-children2>", events: { childrenClick: function () { console.log("childrenClick-anotherChildren1"); return true; }, parentClick: function (msg) { console.log("parentClick-anotherChildren1"); console.log("message:" + msg); return true; } }, components: { anotherChildren2: { props: ['test'], template: "<button @click='findParent'>anotherChildren2-Click</button>", methods: { findParent: function () { this.$dispatch('childrenClick'); } }, events: { childrenClick: function () { console.log("childrenClick-anotherChildren2"); }, parentClick: function (msg) { console.log("parentClick-anotherChildren2"); console.log("message:" + msg); } } } } } } }); </script> }, parentClick: function () { console.log("parentClick-anotherChildren2"); } } } } } } }); </script>
说明：
【1】点击父组件的按钮，会向下广播，然后触发子组件1本身，另外一个子组件1，以及另一个子组件2；
【2】点击子组件2的按钮，会触发子组件2的事件和子组件1的事件，但不会触发父组件的按钮；
【3】点击另一个子组件2的按钮，会触发另一个子组件2的事件，另一个子组件1的事件和父组件的事件（因为另一个子组件1的事件的返回值为true）；
③使用v-on绑定自定义事件：
【1】简单来说，子组件触发某个事件（events里的方法）时，父组件也会执行某个方法（父组件methods里的方法）。