Vue的$emit、$on、$attrs、$listeners

$emit、$on

$on用来设置监听事件，$emit用来触发监听事件。

通过一个三个子组件间的通信来理解和使用$emit和$on。

<div id="app">
    <aaa></aaa>
    <bbb></bbb>
    <ccc></ccc>
</div>

<script type="text/javascript">
    var event=new Vue();
    Vue.component('aaa',{
        template:`<div><p>组件A要发送的name={{name}}</p><button @click="sendname">发送name给C</button></div>`,
        data(){
            return{
                name:"小明"
            }
        },
        methods:{
            sendname(){
                event.$emit('getAname',this.name);
            }
        }
    });
    Vue.component('bbb',{
        template:`<div><p>组件B要发送的age={{age}}</p><button @click="sendage">发送age给C</button></div>`,
        data(){
            return{
                age:"123"
            }
        },
        methods:{
            sendage(){
                event.$emit('getBage',this.age);
            }
        }
    });
    Vue.component('ccc',{
        template:`<p>组件C要接收组件A的name={{name}}，要接收组件B的age={{age}}</p>`,
        data(){
            return{
                name:"",
                age:""
            }
        },mounted() {
            //这里需要用到箭头函数，因为箭头函数不会产生this,如果不用箭头函数，this指代的是event
            event.$on('getAname',name=>{
                this.name=name;
            });
            event.$on("getBage",age=>{
                this.age=age;
            });
        }
    });
    new Vue({
        el:"#app",
        data:{

        },
        methods:{

        }

    });
</script>

组件间的通信，需要双方有发送数据源和接收数据源，其次需要发送函数和接收函数。

这里通过创建一个空的Vue实例作为事件中心，通过它来设置监听事件，和触发事件。