vue组件通信$emit、$on、$listeners

上一篇讲了怎样实现父组件传子组件，或是孙组件的方法，下面将分享一下子，孙组件，传数据给父组件；主要原理就是通过事件触发传递参数达到传值的，常用方法有以下集中：$emit，$on，$listeners;

子组件传值给父组件;

1.$emit

子组件数据传递给父组件，通过事件触发传参数达到传值的目的；

<div id="app"></div>
<script>
Vue.component("component-child",{
    data(){
        return{
            childMsg:'world'
        }
    },
    template:`<div>
        <h3>子组件：{{childMsg}}</h3>
        <button @click="send">传递数据给父组件</button>     //传值给父组件
        <button @click="changeMsg">改变子组件的数据</button>       //改变自身数据，父组件数据不变
    </div>`,
    methods:{
        send:function(){
            this.$emit("getMsg",this.childMsg);          //$emit触发父组件事件
        },
        changeMsg:function(){
            this.childMsg="子组件的数据改变了"
        }
    }
})
Vue.component("component-parent",{
    data(){
        return{
            parentMsg:"hello"
        }
    },
    template:`<div>
        <h1>父组件:{{parentMsg}}</h1>
        <component-child @:getMsg="setMsg"></component-child>
    </div>`,
    methods:{
        setMsg:function(val){
            this.parentMsg=val;
        }
    }
})

new Vue({
    el:"#app",
    template:`<div>
        <component-parent></component-parent>
    </div>`
})
</script>

2.eventBus

兄弟组件传递数据，定义vue空白实例，利用$emit触发事件，使用$on接收事件。

<div id="app"></div>
<script>
let bus=new Vue();            //定义vue空白实例
Vue.component("component-a",{
    data(){
        return{
            aMsg:'组件a的数据'
        }
    },
    template:`<div>
        <h3>组件a：{{aMsg}}</h3>
        <button @click="send">传递数据给组件b</button>                      //传值给b组件
        <button @click="changeMsg">改变组件a的数据</button>           //改变a组件数据，b数据不变
    </div>`,
    methods:{
        send:function(){
            bus.$emit("getMsg",this.aMsg);
        },
        changeMsg:function(){
            this.aMsg="子组件的数据改变了"
        }
    }
})
Vue.component("component-b",{
    data(){
        return{
            bMsg:"组件b的数据"
        }
    },
    template:`<div>
        <h1>组件b:{{bMsg}}</h1>
    </div>`,
    mounted () {
        bus.$on("getMsg",(val=>{             
            this.bMsg=val;                            //注意这个地方this的使用
        }))
    }
})

new Vue({
    el:"#app",
    template:`<div>
        <component-a></component-a>
        <component-b></component-b>
    </div>`
})
</script>

3.$listeners

子，孙组件专递数据给父组件；其实原理还是通过$emit事件触发传参数，达到组件数据传递。

注意：$listeners是vue2.4提出的，使用时一定要注意vue的版本

<div id="app"></div>
<script>
let bus=new Vue();
Vue.component("component-a",{
    data(){
        return{
            aMsg:'组件a的数据'
        }
    },
    template:`<div>
        <h3>组件a：{{aMsg}}</h3>
    </div>`,
    mounted(){
        this.$emit("a",this.aMsg)
    }
})
Vue.component("component-b",{
    data(){
        return{
            bMsg:"组件b的数据"
        }
    },
    template:`<div>
        <h2>组件b:{{bMsg}}</h2>
        <component-a v-on="$listeners"></component-a>
    </div>`,
    mounted () {
        this.$emit("b",this.bMsg)
    }
})

Vue.component("component-c",{
    data(){
        return{
            cMsg:"组件c的数据"
        }
    },
    template:`<div>
        <h1>组件c:{{cMsg}}</h1>
        <component-b  @a="aTest" @b="bTest"></component-b>
    </div>`,
    methods:{
        aTest:function(val){
            console.log(val)
        },
        bTest:function(val){
            console.log(val)
        }
    }
})


new Vue({
    el:"#app",
    template:`<div>
        <component-c></component-c>
    </div>`
})
</script>