组件通讯

1、eventBus

//mian.js
window.EventBus = new Vue();

//兄弟1（调用者）
EventBus.$emit("setVal", data);

//兄弟2（被调用者）
//mounted()钩子中监听
EventBus.$on('setVal', (data) => {
    console.log(data);
}

2、子组件调用父组件的方法

//父组件
<child @refreshList="onRefresList"></child>  
onRefresList(data){
    console.log(data);
}

//子组件 
this.$emit('refreshList',data);

3、父组件调用子组件的方法

//父组件
<coma :das="da" ref="comA"></coma>   //子
this.$refs.comA.say("data");  //调用子的事件，并传值过去
this.$refs.comA.val++;  //改变子的值

//子组件
say(data){
    console.log(data);
    alert("父调用我的");
}

4、父组件传子组件

//父组件
<child :inputName="name"></child>  //name是父组件的data里的值
<child inputName="name"></child>  //name是一个字符串

//子组件
props: ["inputName","head"]
传过来的值不能在data里出现，不能修改，拿到后应用变量存着，其他来操作变量

//子组件传过来验证、有默认值
props: {
    'head': Object,
    'pagecount': {
        default: 5,
        type: Number  //String Number Boolean Function Object Array Symbol
    }
}