Vue组件通讯

组件通讯的关系：父子组件通讯，兄弟组件通讯，跨级组件通讯。

父子组件通讯

  <!-- 
      当子组件像父组件传递数据时，就要用到自定义事件了。

      Vue组件通讯模式
      观察者模式  dispatchEvent和addEventListener
        子组件用$emit() 来触发事件  
	   
 		this.$emit("addNum", this.count);
 
        父组件用$on() 来监听子组件的事件
		
 	
 <brother
 	// v-model还可以创建自定义表单输入组件，进行数据绑定
      v-model="modelNum"       // 子组件事件 this.$emit("input", this.modelNum);
      @addNum="emitEventAdd"    //触发自定义事件
      @click.native="clickComponent"  // 原生事件
    ></brother>

        父组件也可以直接在子组件的自定义标签上使用v-on 
        来监听子组件触发的自定义事件

  v-on 除了监听DOM事件，也可以用.native监听DOM原生事件.监听的是该组件的根元素

    v-model  
    this.$emit('input', number);

    -->

Bus /中央事件总线bus 、父链和子组件索引

/**
 *   创建一个空的vue实例
 *   bus能够轻量巧妙的实现  父子 兄弟 跨级组件的通讯。
 *   如果深入使用。也可以添加data,methods,computed等选项，这些都是公开的。
 *   在遇到一些需要共享信息的时候，只需要在初始化Bus时获取一次，
 *   任何事件，任何组件就可以使用了
 * 
 *   如果项目比较大，可以选择更好的解决方案Vuex 
 * 
 *   除了中央事件总线Bus，还有两种方式能够实现组件通讯：
 *        父链 和 子组件索引   递归向上或向下无限访问
 *      this.$parent   访问父组件。 
 *      this.$children  访问子组件 
 *    
 *   $refs只在组件渲染完成后才填充。并且是非响应式的。
 *   它仅仅是作为直接方位子组件的应急方案。
 */

Bus

 触发： Bus.$emit("sendMessage", this.message);

 响应： Bus.$on("sendMessage", val => {
      this.message = val + "-" + Bus.busMessage;
    });

父链

this.$parent 可以直接访问父组件的实例或者组件

  this.$parent.h3Message = "from one";

子组件索引

通过this.$children来遍历找到子组件比较困难，通过ref指定一个索引名称

  <two ref="two"></two>

  this.$refs.two.parentMessage = "from index";