Vue组件通信详解

组件通信

父传子

什么是父传子?

父组件传递数据给子组件,封装组件必备功能

实现流程:

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

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

<my-button text="登陆按钮" color="green"></my-button>

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

在子组件中接收父组件传入的数据，数组形式

props:['text', 'color'],

在接收数据时，可以以对象形式接收，对数据进行限定

    props:{
        text:{
            type:String, //限制传入的数据类型
            default:'普通按钮', //默认值
        },
        color:{
            required:true, //必填项
            type:String,
        }
    } 

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

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

子传父

什么是子传父?

将子组件中的数据传递给父组件,封装组件必备功能

实现流程:

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

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

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

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

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

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

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

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

任意传

什么是任意传?

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

实现流程:

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

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

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

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

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

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

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