1. 组件通信

1.1 父传子

父传子：父组件传递数据给子组件，封装组件必用功能

流程：在父组件中使用子组件时，通过属性向子组件传递数据，在子组件中使用props接收，像普通数据一样用

第一步：在父组件中调用子组件时定义属性传递数据进入子组件

<my-button :text="btn1" color="red"></my-button>
<my-button text="登陆按钮" color="green"></my-button>
<my-button text="立即跳转" color="blue"></my-button>

第二步：在子组件中接收父组件传入的数据

export default {
    //2.1 在子组件中接收父组件传入的数据，数组形式
    // props:['text', 'color'],

    //2.2 在接收数据时，可以以对象形式接收，对数据进行限定
    props:{
        text:{
            type:String, //限制传入的数据类型
            default:'普通按钮', //默认值
        },
        color:{
            required:true, //必填项
            type:String,
        }
    } 
}

第三步：在子组件中使用传入的数据

<button type="button" :class="color">{{text}}</button>

1.2 子传父

子传父：将子组件中的数据传递给父组件，封装组件必用功能

流程：在子组件中通过$emit 触发父组件中绑定的事件，同时将数据传入事件处理函数中，在父组件接收数据

第一步：在子组件中通过 $emit() 触发事件

this.$emit('fatherEvent', this.username)

第二步：在父组件中调用子组件时，绑定自定义事件，数据直接传入到事件处理函数中

<my-input @fatherEvent="fn"></my-input>

注意：可以在事件处理函数位置直接通过 $event接收子组件传回的值

第三步：在事件处理中接收子组件传回来的数据 data

fn(data){
    this.name = data;
}

1.3 任意传

任意传：任意组件之间传数据，不需要关注组件的层级

流程：利用$bus进行事件绑定和触发，实现数据传递

第一步：在main.js中创建总线

Vue.prototype.$bus = new Vue();

第二步：在一个组件中触发事件

this.$bus.$emit('otherEvent', this.name);

第三步：在另一个组件中绑定事件，接收数据

this.$bus.$on('otherEvent', (data)=>{
    console.log('接收到的数据：', data);
})