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>

效果:

 

posted @ 2021-02-27 14:19  半糖也甜吖  阅读(1403)  评论(1编辑  收藏  举报