vue2.0 子组件之间的通信 $on, $emit, v-ref

组件之间通信:
   通过props,子组件可以获取父组件的数据。但是子组件无法通知父组件数据发生变化。以及父组件无法获取子组件内的数据。所以,通过$on,$emit来通知父组件； 父组件通过v-ref来获取子组件的dom。




   因为组件之间是独立的，数据互不干涉。
   (1) 直接访问:
1) $parant: 父组件实例
        2) $children: 所有子组件实例
        3) $root :    组件所在的根实例
        这三个属性都挂载在组件的this上。


   (2) 通过 $on, $emit通信
        我们可以给DOM元素绑定一个非原生的事件.然后通过手动调用$emit方式来进行事件的触发。


        1）events已经被抛弃;
        2) $on方法,监听事件
   
           Var vm = new Vue({
              
               el : ‘#app’,
               data : {
                   todo: []
               },
       methods : {
                  begin : function(){
                      this.$on( ’add’, function(msg) ){
   this.todo.push(msg);
      }
  }
       }
   });
       
        3) $emit 在实例本身身上触发事件，以及如果本身没有被触发，那么会冒泡到父组件。
     
    var vm = new Vue({


created: function(){
this.$on( ’add’, fucntion( msg ){
this.todo.push(msg);
} );
},


methods: {
onclock: function(){
this.$emit( ’add’, ‘there is a messafe’ );
}
}
    });


    (3) 子组件索引
  Vue通过绑定机制，只需要操作数据，dom就会做出变化。但是也有时候需要操作dom，Vue.js提供了直接访问子组件的方式。
  <child-todo v-ref:first></child-todo>
          
  1) 在父组件中可以通过this.$ref.first的方式获取子组件的实例。 其实v-ref可以获取任意一个dom。
  2）如果v-ref作用在v-for绑定的元素上，那么父组件获取的this.$refs.items为一个数组，包含响应的子组件实例。