关于Vue的组件通信问题

什么是Vue组件？

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

组件通讯包括：父子组件间的通信和兄弟组件间的通信。在组件化系统构建中，组件间通信必不可少的。

父组件--> 子组件

 1.属性设置
 父组件关键代码如下:
 
 1 
 
 子组件关键代码如下：
 
 1 export default { 
 2   name: 'child', 
 3 props: {
 4     child-msg: String 
 5 } 
 6 };
 
 child-msg 为父组件给子组件设置的额外属性值，属性值需在子组件中设置props，子组件中可直接使用child-msg变量。
 
 2.子组件调用父组件
 子组件通过 $parent 获得父组件，通过 $root 获得最上层的组件。
 

子组件--> 父组件

 1.发送事件/监听事件
 子组件中某函数内发送事件：
 this.$emit('toparentevent', 'data');
 
 父组件监听事件：
 
 
 // 在methods里接收
    methods: {

　 toparentevent(msg){

       // msg就是传递的数据
       console.log(msg) 
    }
    }
    
 parentevent 为子组件自定义发送事件名称，父组件中@toparente

 2.父组件直接获取子组件属性或方法
 给要调用的子组件起个名字。将名字设置为子组件 ref 属性的值。
 
 
 
 父组件中通过 $refs.组件名 来获得子组件，也就可以调用子组件的属性和方法了。

   // 获取child.属性  

   this.$refs.aName.child

  // 调用child.方法()  

   this.$refs.aName.child()

 父组件通过 $children 可以获得所有直接子组件（父组件的子组件的子组件不是直接子组件）。需要注意 $children 并不保证顺序，也不是响应式的。
 

多层级父子组件通信：

在Vue1.0中实现了$broadcast与$dispatch两个方法用来向子组件（或父组件）广播（或派发），当子组件（或父组件）上监听了事件并返回true的时候会向爷孙级组件继续广播（或派发）事件。但是这个方法在Vue2.0里面已经被移除了。

其实这两个方法内部实现还是用到的还是$parent以及$children，用以遍历子节点或是逐级向上查询父节点，访问到指定组件名的时候，调用$emit触发指定事件。

复杂的单页应用数据管理

当应用足够复杂情况下，请使用vuex进行数据管理。