组件是vue最主要的语法特性之一，组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
只有把各组件的通讯运用的游刃有余，才能说自己已经入门了，不是吗？

方法调用

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

  • 直接用this.$parent.xxxx这样直接调用父组件的方法。
  • 用$emit向父组件触发一个事件，父组件监听这个事件就行了。
    1
    2
    3
    4
    5
    6
    7
    8
    //父组件
    <child @refreshList="onRefresList"></child>  
    onRefresList(data){
        console.log(data);
    }

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

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

  • 用this.$children，但得到是一个数组，包含所有的子组件，可通过属性判断
  • 通过ref调用
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //父组件
    <coma :das="da" ref="comA"></coma>   //子
    this.$refs.comA.say("data");  //调用子的事件，并传值过去
    this.$refs.comA.val++;  //改变子的值

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

3、兄弟组件调用方法

1
2
3
4
5
6
7
8
9
10
11
//mian.js
window.EventBus = new Vue();

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

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

数据传递

1、父组件传子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//父组件
<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
    }
}

2、子组件传父组件和兄弟组件传值用调用方法解决