vue中$emit、$on使用详解

1、 vm.$on( event, callback )

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

2、vm.$emit( event, […args] )

触发当前实例上的事件。附加参数都会传给监听器回调。

第一步：建一个空白的vue实例页面

<template>
    <div>
        
    </div>
</template>
<script>
import Vue from 'vue'
export default new Vue()
</script>

第二步：子组件

<template>
    <div>
        <button @click="clicka">$emit触发事件</button>
    </div>
</template>
<script>
import eventBus from './eventBus';
export default {
    data() {
        return {
            
        }
    },
    methods: {
        clicka(){
            eventBus.$emit('isClick','点击事件')
        }
    },
}
</script>

第三步： 父组件

<template>
    <div>
        <test-con></test-con>
        <br/>
        test
    </div>
</template>
<script>
import testCon from './testComponents';
import eventBus from './eventBus';
export default {
    data() {
        return {            
        }
    },
    components:{testCon},
    mounted() {
        eventBus.$on('isClick',(res)=>{
            console.log(res)
        })
    },
}
</script>