vue组件之间通信方式总结

组件化开发最常见的业务场景就是组件之间的通信，而vue并不能像react一样，灵活的运用props和回调函数就可以实现组件之间的通信，vue提供相对较多的api应对不同的功能需求，这里做一个运用层次的归纳，备忘；

先模拟一个业务组件场景如下：

传递类型见虚线字母（A、B……）

image

方式一：props

props适合类型A父传子的传递类型；也是最常见的传递方式；用法参见官方文档；

方式二：$emit/$on

此方法适合ABCDEF所有传递类型，父传子、子传父、跨组件传递等；这里主要介绍一下两种场景的使用方法

• 子传父（B）主要通过$emit自定义事件发布事件，传递对应参数，在父组件通过组件的属性绑定对应事件，接收对应的参数；
• 跨组件传递（all）主要是通过在new Vue实例对象上绑定中心事件，然后广播至各组件实现；

以下模拟E路径实现，其他相同

    // componentE
    var componentE = {
        template:`
        <h1 @click='cmeClick'>{{msge_}}</h1>
        `,
        data:function(){
            return{
                msge_:'componentE msg'
            }
        },
        methods:{
            cmeClick(){  
                // this.$root指向new vue实例对象
                this.$root.$emit('componentE',this.msge_);
            }
        }
    }
    // componentB
    var componentB = {
        template:`
            <h1>{{msge_}}</h1>
        `,
        data:function(){
            return{
                msge_:'componentB msg'
            }
        },
        mounted() {
            this.$root.$on('componentE',this.cme_emit)
        },
        methods:{
            cme_emit(msg){  
                console.log(msg) //componentE msg
            }
        }
    }

方式三：$attrs/$listeners

此方法常用于C路径传递方式，也就是祖传子，$attrs传递属性，$listeners传递事件；因为props传递只能之上而下一层一层传递，并不能跃级传递，$attrs/$listeners可以作为中间层将上层组件信息，传递给任何子组件；

例子：首先componentC通过props接收到componentA组件信息；然后通过$attrs/$listeners将接收到的信息传递给componentD和componentE;代码如下：

        var componentE = {
            template:`
            <h1 @click='cmeClick'>{{msge_}}</h1>
            `,
            mounted() {
                console.log('cme:',this.$attrs,this.$listeners)
            }
            data:function(){
                return{
                    msge_:this.msge
                }
            },
        }
        var componentD = {
            template:`
            <h1>{{msgd_}}</h1>
            `,
            mounted() {
                console.log('cmd:',this.$attrs,this.$listeners)
            },
            data:function(){
                return{
                    msgd_:this.msgd
                }
            }
        }
        var componentC = {
            props:['msgc'], // `$attrs/$listeners`接收没被props接收的属性数据
            template:`
            <div>
                <h1>{{msgc_}}</h1>
                // 此处通过v-bind v-on 传递给需要的组件
                <componentD :msgd='msgd' v-bind='$attrs' v-on='$listeners' />
                <componentE :msgd='msgd' v-bind='$attrs' v-on='$listeners' />
            </div>
            `,
            data:function(){
                return{
                    msgc_:this.msgc,
                    msgd:'ddd',
                    msge:'eee'
                }
            },
            components:{
                componentD:componentD,
                componentE:componentE
            }
        }
        var componentA = {
            template:`<div><componentC :b='b' @tb='tb' :msgc='msgc' /></div>`,
            data:function(){
                return{
                    msgc:'ccc',
                    b:0,
                }
            },
            methods:{
                cme_emit:function(msg){
                    console.log('cma:',msg)
                },
                tb(){
                    console.log(tb)
                }
            },
            components:{
                cmc:cmc
            }
        }

方式四：provide/inject

provide/inject是从祖先组件想后代组件传递，不论层次多深，但官方不推荐使用，这样会破坏vue 数据流原则；使用方法很简单，祖组件定义provide数据，后代组件inject接收；

 var componentA = {
            template:`<div>1111</div>`,
            data:function(){
            },
            provide:{
                testProvide:'provide data'
            },
            //……
        }
        
var componentE = {
            template:`
            <h1'>2222</h1>
            `,
            inject:['testProvide'],
            mounted() {
                console.log(this.testProvide) //provide data
            },
        }

方式五 vuex

vuex是vue生态里面的状态管理器，可要储存获取项目任何数据，详见官网