组件通信

我们在开发vue项目的时候，经常会遇到多个组件互相通信的问题，也就是数据传递，兄弟组件传递、父子组件传递等，本文就是为了解决组件之间通信问题。

store共享通信

利用vuex或者pina定义store文件，在共享区域内进行互相调用，很方便，这种通信方式采用共享内存的原理，定义了store之后，可以互相使用对方的store进行数据调用和传递，此处不再赘述

object对象通信

对象具有天然的可传递性，使用对象可以避免vue的props属性不能修改的问题，对象内部的成员变量可以被任意修改，所以可以进行信息的交互。

• 父组件

父组件通过参数传递 data-info属性，里面包含

{
    "visiable":false,
    "categoryId":1
}

父组件调用

<category-attr ref="categoryAttr" :data-info="specAttr"/>

• 子组件

子组件props接收data-info信息

props:{        
    //交互信息
    dataInfo:{
        type : Object,
        default : {}
    },        
    },

子组件可以任意修改对象的信息

父组件调用子组件

可以使用refs方法

父组件：定义ref="categoryAttr"

<category-attr ref="categoryAttr" v-model:visiable="specAttr.visiable" :category-id="specAttr.categoryId"/>

调用方法：this.$refs.categoryAttr.init()

async openCategoryAttr(id){
                        
    this.specAttr.categoryId = id;
    this.specAttr.visiable = true;
    
    //防止子组件加载太慢导致获取不到组件
    setTimeout(()=>{
        console.log(this.$refs.categoryAttr);
        this.$refs.categoryAttr.init();
    },10)
}

子组件：定义init()方法

methods : {
        
    sendNotifyMessage(val){
        this.$emit('update:visiable',val);
    },
    
    /**
    * 初始化数据
    */
    async init(){
        //todo
    }
  }

子组件调用父组件

由于自定义组件本身不具备click事件，所以这里@click不会生效，需要子类进行触发，子组件的view有@click事件，所以子组件被调用的时候，去调用父组件的方法

vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn；

父组件定义方法

<lemon-search 
    @click="clickSearch()">
</lemon-search>

methods : {            
    clickSearch(){
        console.log("....")
    }
}

子组件调用父方法

//子组件调用父组件方法
this.$emit('click');