Vue2.x-$on,$once,$off以及$emit的使用

$on

　　使用：vm.$on('事件名稱',callback)

　　說明：監聽當前實例(vm)中的自定義事件，事件可以由$emit定義

$once

　　使用：vm.$once('事件名稱',callback)

　　說明：監聽當前實例(vm)中的自定義事件，事件可以由$emit定義,但是只會觸發一次，觸發后即解除

$off

　　使用：vm.$off('事件名稱')

　　說明：關閉當前實例中的自定義事件

$emit

　　使用：vm.$emit('事件名稱',args)

　　說明：自定義事件

代碼示例：

子組件：
<template>
    <div>
        <button @click="clickFn">我是子組件</button>
        <button @click="removeListener">解除監聽</button>
    </div>
</template>

<script>
export default {
    created() {
        this.$on('ChildClickFn', arg => {
            console.log('我是用$on監聽事件並觸發的，子組件的clickFn被執行了,參數是:', arg);
        });
        this.$once('ChildClickFn', arg => {
            console.log('我是用$once監聽事件並觸發的,參數是:', arg);
        });
    },
    methods: {
        clickFn() {
            this.$emit('ChildClickFn', 'is Child Data');
        },
        removeListener() {
            this.$off('ChildClickFn');
            console.log('解除監聽');
        }
    }
};
</script>


父組件：
<template>
    <div>
        <Test @ChildClickFn="parentClickFn" />
    </div>
</template>

<script>
import Test from './views/test3/index';
export default {
    name: 'App',
    components: { Test },
    methods: {
        parentClickFn(arg) {
            console.log('我是父組件，子組件傳過來的參數是：', arg);
        }
    }
};
</script>

效果：