vue 组件之间的通信（父子、非父子）

//子组件向父组件传递数据
<div id="app">
    <test-child receive-child="标题"></test-child>
</div>

 - 在子组件test-child使用 props 声明: props:['receiveChild']
  然后父组件就可以向trans里传递数据，动态数据需加冒号 :receive-child="fathermsg"

 - 为 prop 指定验证规则，如果传入的数据不符合要求，Vue 会发出警告。
   props:{
           'recStr':{
                type:String,    //类型不要加引号
                default:"我是默认字符串"
                }
           'recArr':{
                type:Array,    
                default:function(){    //数组和对象需用函数返回数据
                    return ["第1项","第2项"，"第3项"]
                    }
                }
           }

//子组件向父组件传递数据:
<div id="app">
    {{showMsg}}
    <test-child @send="getChild"></test-child>
</div>

 - 在子组件的HTML里定义一个触发事件：
   <li @click="sendMsg">点击我触发</li>
 - 在子组件的methods：
   sendMsg：function(ev){
        this.$emit('send',ev.target.innerHtml)  //send是自定义事件，后面的是参数
       }
 - 在父组件的methods里:
   getChild:function(str){
        this.showMsg=str    //showMsg在父组件的data里定义
    }

//非父子组件间的通信：
<div id="app">
    <test-header></test-header>
    <test-list></test-list>
</div>
 - 空实例方法：
   $emit   //发布
   $on    //订阅 
///
//list向header传递数据：
 - 定义一个空实例：
   var busVm = new Vue();

 - 在list组件里定义一个触发事件：
   <li @click="sendMsg">点击我触发</li>

 - 在list组件的methods发布：
   sendMsg：function(ev){
        busVm.$emit('send',123)  //send是自定义事件，后面的是参数

 - 在header组件的mounted里订阅：
   mounthe:function(){
        busVm.$on('send',function(num){
           console.log(num);
        }.bind(this))
    }