vue如何实现父子组件通信，以及非父子组件通信（待看）

http://www.cnblogs.com/luozhihao/p/5329440.html（vue特点及双向数据绑定）

https://vuefe.cn/v2/guide/components.html#

非父子关系

var vm = new Vue({
  el: '#list',
  ready: function(){
    var _this = this;
    var url = 'http://192.168.1.111:8080/api/v2/getCommonCourses';
    $.post(url,{'apiKey':apikey},function(data){
      console.log(data);
      if(data.status === 0) {
        _this.$broadcast('parent-msg',data.data);
      }
    },'json');
  },
  components: {
    courseList : List
  },
});

new Vue({
el: '#condition',
  data: {
    isChecked: [1,0],
  },
  methods {
    common: function() {
      this.isChecked = true;
      
    },
    enterprise: function() {
      this.idChecked = false;
    }
  }
})
这样的两个组件之间的通讯应该通过共同的父组件，不管是通过



    refs方式：parent.$refs.list.<Method>



    customer event方式: 先dispatch给父组件，再由父组件broadcast给子组件



    props方式



这里推荐props方式。那么这里应该由三个组件：



    FilterList (parent)



    Condition (child)



    List (child)并且由parent来享有数据：list和filterCondition，通过props传给child。




<div id='app'>
  <filter-list></filter-list>
</div>

<template id='filter-list-temp'>
<div>
  <h4>filter list</h4>
  <condition :filter-text.sync="filterText"></condition>
  <list :items="filteredItems"></list>
</div>
</template>

<template id='condition-temp'>
<div>
  <input v-model="filterText"/>
</div>
</template>
 
<template id='list-temp'>  
<div>
  <p v-for="item in items">
    {{item}}
  </p>
</div>
</template>
Vue.component('condition', {
  template: '#condition-temp',
  props: ['filterText']
});

Vue.component('list', {
  template: '#list-temp',
  props: ['items']
})

Vue.component('filter-list', {
  template: '#filter-list-temp',
  data: function() {
     return {
       filterText: '',
       items: ['Jack Yang','Angel','New York']
     }
  },
  computed: {
    filteredItems: function() {
      return this.$data.items.filter(function(item) {
        return item.indexOf(this.$data.filterText) != -1;
      }.bind(this));
    }
  }
})

new Vue({
  el: '#app'
})

父子通信


vue父子组件通信

 
 

  
  父子组件之间可以通过props进行通信：
 
 

 
 

  
  组件的定义：
 
 

 
 

  
       1.创建component类：
 
 

 
 

  
                 

  
  


   
   


    
    


     
     
 
         

           1 
         
 
         

           2 
         
 
         

           3 
         
 
 
         
 
          
 
           var 
           Profile = Vue.extend({ 
          
 
          
 
                               
           template: 
           "<div>Lily</div>" 
           ; 
          
 
          
 
                           
           }) 
          
 
         
 

    
    

   
   

  
  

  
  
　　

 
 

 
 

  
       2.注册一个tagnme:
 
 

 
 

  
                 Vue.component("me-profile",Profile);//全局注册
 
 

 
 

  
                 局部注册：
 
 

 
 

  
                           

  
  


   
   


    
    


     
     


      
      
 
          

            1 
          
 
          

            2 
          
 
          

            3 
          
 
          

            4 
          
 
          

            5 
          
 
          

            6 
          
 
          

            7 
          
 
 
          
 
           
 
            var 
            vm =  
            new 
            Vue({ 
           
 
           
 
               
            el: 
            "#todo" 
            , 
           
 
           
 
               
            components: { 
           
 
           
 
                 
            "my-profile" 
            : Profile 
           
 
           
 
               
            }, 
           
 
           
 
               
            ... 
           
 
           
 
            } 
           
 
          
 

     
     

    
    

   
   

   
   
　　

  
  

 
 

 
 

  
  模板注意事项：
 
 

 
 

  
             因为 Vue 就是原生的DOM，所以有些自定义标签可能不符合DOM标准，比如想在 
  
  table 中自定义一个 
  
  tr，如果直接插入 
  
  my-component 不符合规范，所以应该这样写：
 
 

 
 

  
   
 
 

 
 


  
  


   
   


    
    


     
     
 
         

           1 
         
 
         

           2 
         
 
         

           3 
         
 
         

           4 
         
 
 
         
 
          
 
           <table> 
          
 
          
 
              
           <tr is= 
           "my-component" 
           ></tr> 
          
 
          
 
           </table> 
          
 
         
 

    
    

   
   

  
  

  
  
　　

 
 

 
 

  
  在子组件中有一个this.$parent和this.$root可以用来方法父组件和跟实例。（但是不推荐）
 
 

 
 

  
  Vue中子组件可以通过事件和父组件进行通信。向父组件发消息是通过this.$dispatch,而向子组件发送消息是通过this.$boardcast,这里都是向所有的父组件和子组件发送消息。
 
 

 
 

  
  子组件:
 
 

 
 


  
  


   
   


    
    


     
     
 
         

           1 
         
 
         

           2 
         
 
         

           3 
         
 
         

           4 
         
 
         

           5 
         
 
         

           6 
         
 
         

           7 
         
 
         

           8 
         
 
         

           9 
         
 
         

           10 
         
 
         

           11 
         
 
         

           12 
         
 
         

           13 
         
 
         

           14 
         
 
 
         
 
          
 
           props: { 
          
 
          
 
                          
           url: { 
          
 
          
 
                                     
           type: Array, 
          
 
          
 
                                     
           default 
           : 
           function 
           () { 
          
 
          
 
                                          
           return 
           []                
          
 
          
 
                                     
           } 
          
 
          
 
                                
           } 
          
 
          
 
                      
           }， 
          
 
          
 
             
           methods: { 
          
 
          
 
                
           add: 
           function 
           () { 
          
 
          
 
                  
           this 
           .$dispatch( 
           "add" 
           , 
           this 
           .input); 
           //这里就是向父组件发送消息 
          
 
          
 
                  
           this 
           .input = 
           "" 
           ; 
          
 
          
 
                
           } 
          
 
          
 
              
           } 
          
 
         
 

    
    

   
   

  
  

  
  
　　

 
 

 
 

  
  父组件：
 
 

 
 


     
     

      
      1
     
     

     
     

      
      2
     
     

     
     

      
      3
     
     

     
     

      
      4
     
     

     
     

      
      5
     
     

     
     

      
      6
     
     

     
     

      
      7
     
     

     
     

      
      8
     
     

     
     

      
      9
     
     

     
     

      
      10
     
     

     
     

      
      11
     
     

     
     

      
      12
     
     

     
     

      
      13
     
     

     
     

      
      14
     
     


     
     


      
      
 
       data() { 
      

      
      
 
                 
       return 
       { 
      

      
      
 
                    
       url:   ..... 
      

      
      
 
                  
       }  
      

      
      
 
             
       }， 
      

      
      
 
         
       events: { 
      

      
      
 
            
       add: 
       function 
       (input) { 
      

      
      
 
              
       if 
       (!input) 
       return 
       false 
       ; 
      

      
      
 
              
       this 
       .list.unshift({ 
      

      
      
 
                
       title: input, 
      

      
      
 
                
       done: 
       false 
      

      
      
 
              
       }); 
      

      
      
 
            
       } 
      

      
      
 
          
       }